Part 3 : Use the Script
To actually use the modal dialog script requires two things - the HTML code in your web page that contains the content of what you want the dialog to display and the Javascript calls to display the dialog and to handle the resonses based on what action that tyour visitors take with respect to that dialog. Let's start by looking at what the HTML needs to look like. Here's the simple one from the sample page:
<div id="box" class="dialog">
<div style="text-align:center"><span id="txt">Press OK to continue.</span><br>
<button onclick="hm('box');okSelected()">OK</button></div>
</div>
<div style="text-align:center"><span id="txt">Press OK to continue.</span><br>
<button onclick="hm('box');okSelected()">OK</button></div>
</div>
The first thing you will notice is that the div has both an id and a class. The class being set to "dialog" is what identifies the content of this div to the dialog box script as being the content for a dialog box so that it wont be displayed as part of the regular web page. The id is what we will use to reference this particular div when we want to run it.
The second thing is the processing that we perform when a button in the dialog box is selected. We need to call the hm() function passing it the id of the current dialog so that the dialog box will be removed from the display when the button is selected. Assuming that you have some processing of your own that needs to run when a button in the dialog is pressed all that you need to do in order for that processing to be run is to put that code into a separate function and call that function from within the onclick code immediately after calling the hm() function (as I have shown with the okSelected() function in the example). You can either call a different function depending on which button is selected or call the same function and pass it different values.
If you want to put an actual form into the dialog box then instead of using an onclick on a button tag you would place the same Javascript code into the onsubmit on the form tag instead.
All that remains then is to actually call this code from within our Javascript. To help show how to do this properly I am going to take the simple case of the following code which calls the alert dialog.
var x = 'something to check';
alert(x);
var y = x;
alert(x);
var y = x;
Now that code doesn't actually do a great deal but let's say that we want to convert that to call our modal dialog box instead. Here's the code that we need:
var x = 'something to check';
$('txt').innerHTML = x;
sm('box',200,50);
function OKSelected() {
var y = x;
}
$('txt').innerHTML = x;
sm('box',200,50);
function OKSelected() {
var y = x;
}
There are three things to take not of in this code. The first is that we actually perform the modal dialog display with the sm() function call. This takes three parameters identifying the id of the dialog to be displayed, the width of dialog box to display and the height of the dialog to be displayed.
The second is that the call to the sm() function should come last in whatever code that is being run and whatever code that you want to be run once a response is received back from the dialog goes into the separate function that the buttons or form in the dialog call.
The third and final thing is the weay that you pass information into the dialog box. This is done by attaching an id to the sections within the dialog box into which you want to be able to load dynamic content. You can then use document.getElementByID().innerHTML to load your content into that part of the dialog box. The dialog box script provides a shorter way to specify this by substituting $ for document.getElementById.
