Amar Phadke's weblog

You are developing a web application that requires the user to take an action before doing anything else on the web page. Eg.,

1. Click to keep session from being timed out.
2. Confirm changes on the web page.
3. Rate a product displayed on the web page.
4. Accept clauses that pertain to certain actions on the web page.
5. Forced reading of administrative messages.

What do you do? The only modal dialog options supported by the html standard today are alert, confirm and prompt. An alert dialog box displays a message with an “OK” button, Confirm displays a message/question with “OK” and “Cancel” buttons. Prompt displays a message with an input box for taking user input. The look and feel of these built-in dialog boxes is controlled by the browser. You cannot embed all the html tags/styles within these dialog boxes to make it look a part of your application.

There are a few workarounds available that are not part of the standard today. One of the popular ones is using a set of div tags containing a semi-transparent png image file that covers the entire web page. The modal dialog is then presented on top of this div. Just do a google search for “modal dialog box” . One of the sites that i found useful was http://javascript.about.com/library/blmodald1.htm . Another one exists here http://www.eggheadcafe.com/articles/javascript_modal_dialog.asp

If you are developing an application only for the Internet Explorer web browser (does anyone do that anymore?), you could make use of window.showModalDialog(url) which is IE-specific. It displays the content of a web page as a new modal window on top of the current web page.

In my personal opinion, its high time that the html standard came up with a consistent way to display modal dialog boxes so that the poor web developer does not have to come up with workarounds. This will save a lot of time and redundant scripting.

This entry was posted on Thursday, May 8th, 2008 at 10:01 am and is filed under User Interface, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.