The ShowModalDialog function has been in use for a long time and is now part of the emerging HTML5 specification. Although there are many pro and con arguments for using using this function, the fact remains that it has been extensively used in past and it continues to serve a useful function under specific conditions.
The fact that you can have two separately operating HTML forms that interact is important if you are coding more complex behaviors. For simpler behaviors you may want to look into using the jQuery modal dialog (really a floating div) which serves the same purpose.
A Bit of Background on showModalDialog()
Until recently only Internet Explorer supported displaying modal dialog boxes using the Window.showModalDialog command. Other browsers supported modal dialog boxes using the window.open command along with various JavaScript workarounds such as:
mywindow = window.open('test.html',...
if(window.focus)Â mywindow.focus();
The window.open workarounds were obviously awkward and so it’s good news that showModalDialog() is being standardized as part of HTML5.
As things stand the browsers that currently support the  showModalDialog() command are IE4+, FireFox 3+, Safari 5.1+, with more to come as the HTML5 standard continues to be adopted. Although the latest versions of Google Chrome do support the showModalDialog command, the resulting window is not modal.
Spawning New Windows When Refreshing
A problem with windows spawned using the showModalDialog() call is that if the spawned windows attempt to refresh themselves they will instead remain open and then also open a brand new browser window.
So to give a practical example: Â if you have a Web form that opens a modal dialog containing a sub-form for the user to fill out and submit, you will have problems with the submission process because instead of refreshing itself, the sub-form will stay the same and will open a brand new window that shows its updated version.
Obviously this type of behavior is less than desirable. I have been dealing with this since the early days of Internet Explorer and the behavior continues to this day with IE9.
Happily there is a solution.
How to Make a Modal Dialog Refresh
Here is an example of a showModalDialog() call to open a forms page called test.html:
window.showModalDialog('test.html?Id=' + strId, window, 'dialogWidth:1200px; dialogHeight:820px; dialogLeft:10; dialogTop:10; center:1; status:0; help:0');
To make a modal dialog refresh without spawning a new instance of itself relies on a simple fix:
- First and foremost, add the HTML tag (<base target=”_self” />) to the head sectionof your HTML document. Depending on your method of refreshing the form, adding this tag may be sufficient.
<html> <head> <base target="_self" />
- Next check to see if your modal dialog now correctly refreshes itself.In some cases the modal dialog will still open a new window. For instance if you were using a JavaScript self.location.href= command then you will need to replace this with a simulated hyperlink click event.
- To do so, add a hyperlink to your page that is styled to be invisible (ie: <a href=”” id=”goLocation” style=”display:none;”>).
- Then replace your JavaScript self.document.location.href = ‘test.html’; with a click command to your hidden hyperlink as follows:
document.getElementById('goLocation').href = 'test.html'; document.getElementById('goLocation').click();
Summary
In past showing modal dialog windows on the Web was inconsistently supported between the major browsers and often required browser-specific code and/or special workarounds. The HTML5 standard now includes much needed support for cross browser compatible modal dialog functionality by supporting the showModalDialog command.
As I explained, modal dialog windows created using the showModalDialog command can behave unexpectedly when the form within the modal dialog needs to have dynamic behavior. Without the proper code a form refresh or submission will spawn a new browser window. Happily this can be corrected using the steps outlined above.
I hope this article has been useful, and as always I welcome feedback on the subject in the comments below.
Alternate Options
As an alternate solution to using the showModalDialog, you may wish to look into the JQuery-UI modal dialog widget. This component is quite flexible and may suit your needs as well or possibly better than the showModalDialog option. You can custom build a form in your JQuery modal dialog and execute server-side communication via AJAX calls.
Further Reading
- Webdeveloper.com: Â Setting location.href on a modal popup opens a new window
- Bytes.com:Â How to add base target=_self in code behind
- Developer.mozilla.org Documentation:Â window.showModalDialog
- Social.msdn.microsoft.com:Â window.showModalDialog problem
- DataGrid Girl:Â showModalDialog and postbacks in ASP.NET
- Code.google.com:Â Issue 82760: Â JavaScript ShowModalDialog Not Working
Justin Cooney 
Leave a comment