This new version of my modal dialog script incorporates a number of changes from the previous 2006 version.
The entire script is now defined as an object which you create when the page is first loaded. The only methods then exposed for use are the sm() and hm() methods used to show and hide a dialog respectively.
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.
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:
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.