JavaScript - Cross Browser Modal Dialog Box By Robbe Morris

JavaScript - Cross Browser Modal Dialog Box

By Robbe D. Morris

Printer Friendly Version

Robbe & Melisa Morris

The following JavaScript code snippet demonstrates how to create a wide variety of modal dialog boxes which force the user to answer the question prior to continuing on. To see this in action, JavaScript Modal Dialog Demo. 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");>Yes</a>  ';
     Buttons += '<a href=javascript:CloseForm("No");>No</a>  ';
     Buttons += '<a href=javascript:CloseForm("Cancel");>Cancel</a>  ';
     ModalDialogShow("Dialog",BodyText,Buttons,EventHandler);
  }

  function YesNoMaybe(BodyText,EventHandler)
  {
     var Buttons=''; 
     Buttons = '<a href=javascript:CloseForm("Yes");>Yes</a>  ';
     Buttons += '<a href=javascript:CloseForm("No");>No</a>  ';
     Buttons += '<a href=javascript:CloseForm("Maybe");>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>


	Robbe has been a Microsoft MVP in C# since 2004. He is also the co-founder of EggHeadCafe which provides .NET articles, book reviews, software reviews, and software download and purchase advice.