Modal Dialogs

This new version of my modal dialog script incorporates a number of changes from the previous 2006 version.

These changes make this new version far easier to use than the earlier version as all that you need to be able to use the script now is a copy of the overlay image that the script uses to partly conceal the main content of the page while the dialog is displayed and the script itself. You then attach the script to the bottom of your page and then add your code to create your specific modal dialog after the modal dialog object has been created. The code to create your modal dialog needs to simply define a node containing the definition of how your modal dialog should look with one or more buttons in your dialog either calling the hm() method directly or calling a function that in turn calls the hm() method so that the dialog will disappear once that button is pressed.

Apart from these changes the script functions the same as before and still has the same limitations with respect to how JavaScript works in that the call to the modal dialog must be the last statement in your function with no function to return to and with the subsequent code to be run being moved to a separate function.

The first thing you need to do is to take a look at the example of what this modal dialog / lightbox script looks like in operation.

If you want to implement this on your page then the first thing you need is a copy of my $B script (if you don't already have it.


That script provides the viewport size and current scroll position in order to position the overlay image so that it prevents interaction with the rest of the page while your light box is displayed. You'll need a copy of the grey image (at the left of this text) as overlay.png. (Right click on the image link and select "Save As" to obtain a copy of the image).

Next you need the modal dialog script itself.


The last thing that you need is your own code that generates your particular lightbox that you want to display (or several such pieces of code if you are going to display several lightboxes in the same page. Your code needs to come after the scripts provided above. The code to display the simple "alert" in the example looks like this:

d = document;
d1 = d.createElement('div');
d2 = d.createElement('div'); = 'center';
e = d.createElement('span');
n = d.createTextNode(t);
e = d.createElement('button');
n = d.createTextNode('OK');
e.onclick =;

Simply attach all the JavaScript to the bottom of your web page immediately before the </body> tag and call the code that generates your custom dialog when you want it to display. Note that this call should be the last statement in your function as JavaScript does not stop running subsequent commands when a call to display a custom modal dialog is made. The only dialogs that JavaScript stops for are the three that are built into JavaScript for debugging purposes.

If you want to use one of these calls in the middle of a function then you'll need to rewrite the function.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow