DHTML Dialogs vs. Popups

DHTML and Popup Dialog Comparison

There are all kinds of situations in web applications were you need to collect information from the user, and our Corporate Management Suite is no exception. Like many web apps, we used to pop open a new, smaller browser window for this purpose. It certainly got the job done, but there were all kinds of problems.

The most annoying of these were popup blockers. Not only do the new browsers ship with blockers installed and activated by default, but add-in toolbars from Yahoo! and Google closed our new windows as fast as we could open them.

We also had problems with this popup window confusing novice computer users. It completely took them out of the flow of the application and they sometimes became lost if they temporarily switched to another program or accidentally clicked somewhere else.

Finally, and maybe most frustrating to me, the darn thing just looked ugly. It was always the same size, didn't move with the main browser, and taunted us with its operating system specific minimize and close buttons.

After a fair amount of internal debate we decided ditch the popup window and move to a Dynamic HTML modal dialog. It ended up being a fantastic decision and we haven't looked back. Gone are the days of having the popup and main windows get out of sync. Our dynamic modal dialog is actually part of the HTML page now, and blocks you from clicking anywhere else while it's open. It also resizes automatically based on screen real estate and adds scrollbars when needed.

We've since incorporated the code into our webpage, so you can go to our products page and click on the automated product tour button on the right to see an example of it in action. The code is an extension of Dojo's modal dialog and I'd be happy to clean it up and provide it for download if there's a demand.