The following JavaScript code snippet demonstrates how to create a wide variety of modal dialog boxes. The first block of JavaScript code can be put into a generic .js script file. The second JavaScript block contains a couple of wrapper samples for creating a yes, no, cancel option as well as a yes, no, maybe option to demonstrate that you can create an unlimited number of customized dialogs. You'll probably want to create a few standard options and put them in your own generic .js script file. It is pretty easy to force the window to be modal. We'll attack the issue in both the window.opener and the modal dialog window itself. In the window.opener, we'll use the window.setInterval() method to repeatedly check to see if our globally defined winmodal window is open. If so, we'll set its focus by using window.focus(). To avoid any extra window minimization of the modal dialog window, we'll call window.focus() in the dialog window body tag's onblur() event. When we launch the modal dialog window, we'll also include the name of the method we want called when an option is selected by the user and the window is closed. Notice how I opted to use eval() to dynamically fire the passed in JavaScript method when the window is closed to handle the business logic when the user selects a response. Unlike typical modal dialogs in windows, you have to separate out the code the launches the window and the code that reacts to the response into two separate JavaScript functions.I believe you'll find this to be an effective way to create modal dialog windows. In fact, it even handles the user clicking on non IE windows and then attempting to return to the window.opener or if the user tries to close the browser window by right clicking on it while in a minimized state. I hope you found this little snippet helpful.
Modal Dialog Box Sample Code
<html>
<script language="JavaScript">
var ModalDialogWindow;
var ModalDialogInterval;
var ModalDialog = new Object;
ModalDialog.value = '';
ModalDialog.eventhandler = '';
function ModalDialogMaintainFocus()
{
try
{
if (ModalDialogWindow.closed)
{
window.clearInterval(ModalDialogInterval);
eval(ModalDialog.eventhandler);
return;
}
ModalDialogWindow.focus();
}
catch (everything) { }
}
function ModalDialogRemoveWatch()
{
ModalDialog.value = '';
ModalDialog.eventhandler = '';
}
function ModalDialogShow(Title,BodyText,Buttons,EventHandler)
{
ModalDialogRemoveWatch();
ModalDialog.eventhandler = EventHandler;
var args='width=350,height=125,left=325,top=300,toolbar=0,';
args+='location=0,status=0,menubar=0,scrollbars=1,resizable=0';
ModalDialogWindow=window.open("","",args);
ModalDialogWindow.document.open();
ModalDialogWindow.document.write('<html>');
ModalDialogWindow.document.write('<head>');
ModalDialogWindow.document.write('<title>' + Title + '</title>');
ModalDialogWindow.document.write('<script' language="JavaScript">');
ModalDialogWindow.document.write('function CloseForm(Response) ');
ModalDialogWindow.document.write('{ ');
ModalDialogWindow.document.write(' window.opener.ModalDialog.value = Response; ');
ModalDialogWindow.document.write(' window.close(); ');
ModalDialogWindow.document.write('} ');
ModalDialogWindow.document.write('</script' + '>');
ModalDialogWindow.document.write('</head>');
ModalDialogWindow.document.write('<body onblur="window.focus();">');
ModalDialogWindow.document.write('<table border="0" width="95%" align="center" cellspacing="0" cellpadding="2">');
ModalDialogWindow.document.write('<tr><td align="left">' + BodyText + '</td></tr>');
ModalDialogWindow.document.write('<tr><td align="left"><br /></td></tr>');
ModalDialogWindow.document.write('<tr><td align="center">' + Buttons + '</td></tr>');
ModalDialogWindow.document.write('</body>');
ModalDialogWindow.document.write('</html>');
ModalDialogWindow.document.close();
ModalDialogWindow.focus();
ModalDialogInterval = window.setInterval("ModalDialogMaintainFocus()",5);
}
</script>
<script language="JavaScript">
function YesNoCancel(BodyText,EventHandler)
{
var Buttons='';
Buttons = '<a href="javascript:CloseForm(">Yes</a> ';
Buttons += '<a href="javascript:CloseForm(">No</a> ';
Buttons += '<a href="javascript:CloseForm(">Cancel</a> ';
ModalDialogShow("Dialog",BodyText,Buttons,EventHandler);
}
function YesNoMaybe(BodyText,EventHandler)
{
var Buttons='';
Buttons = '<a href="javascript:CloseForm(">Yes</a> ';
Buttons += '<a href="javascript:CloseForm(">No</a> ';
Buttons += '<a href="javascript:CloseForm(">Maybe</a> ';
ModalDialogShow("Dialog",BodyText,Buttons,EventHandler);
}
function YesNoCancelReturnMethod()
{
document.getElementById('modalreturn1').value = ModalDialog.value;
ModalDialogRemoveWatch();
}
function YesNoMaybeReturnMethod()
{
document.getElementById('modalreturn2').value = ModalDialog.value;
ModalDialogRemoveWatch();
}
</script>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="center" width="60%">
<tr><td align="left"></td></tr>
<tr><td align="left"></td></tr>
<tr><td align="left"></td></tr>
<tr>
<td align="left"><a href="javascript:YesNoCancel('Yes, no, or cancel me',
'YesNoCancelReturnMethod()');">Show Modal #1</a>
1. <input type="text" id="modalreturn1" name="modalreturn1" value="''"></td>
</tr>
<tr>
<td align="left"><a href="javascript:YesNoMaybe('Yes, no, or maybe me',
'YesNoMaybeReturnMethod()');">Show Modal #2</a>
2. <input type="text" id="modalreturn2" name="modalreturn2" value="''"></td>
</tr>
</table>
</body>
</html>
Labels: JavaScript, Modal Dialog Box |
