Coming from the world of Windows software development, the concept of a modal dialog box is an absolute expectation. Most often such dialogs are used to gather required information from the user while ensuring that nothing is clicked or altered in the main application window. When moving to the web world, it’s a bit jarring to discover that there is no ubiquitous built-in modal dialog*.
jQuery and jQuery UI provide an overlay-based approach to solving this problem that is both visually appealing and functionally complete. And, as with all things jQuery, it is very simple to implement.
Click here to see the popup (unless you’re reading this in a news reader, then you’ll need to view the post on site).
This sample is very simple to code in HTML and jQuery. Basically I provide a hidden DIV element containing the message to display and then initiate the dialog on page load. The link for the popup is also shown:
<div id="dialog" title="Example dialog"> <p>Some text that you want to display to the user.</p> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true }); }); </script> <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a> |
There are many more options describe on the jQuery UI dialog pages. One of the reasons that I prefer the jQuery UI dialog to any of the other overlay dialog/tooltip solutions is that the jQuery UI version is so easy to implement and has very good defaults. By default the dialog is draggable, sizeable and includes the appropriate control element for closing the dialog. Surprisingly many other solutions don’t have these features by default.
Some text that you want to display to the user.
*Footnote: Yes, IE does have a modal popup window option, I know. It’s extremely non-standard and only supported in IE, so it’s not a reasonable solution in most cases.
Comments:
{ 1 trackback }
Comments on this entry are closed.