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 
The way you have explain is very understandable Justin !!
Thanks Vishal, I’m glad you found this article interesting!
gr8 code thanks
Thanks, I’m glad you found the code useful!
Thanks Justin, with your code you helped me a lot.
Greetz from Germany.
Hi Gerhard, I’m glad the code helped. Cheers!
thanks!!! you save me :D
Antonio from Italy!!
I’m happy my article was useful to you!
First point ok.. second point confusing…can you give clear example ….
Great! the first solution worked and solved my problem.
Thanks.
Marco.
That’s great, I’m glad the solution worked! Thanks for your feedback.
Justin
Absolutely brilliant. Thank you, thank you, thank you. Saved me from a complete overhaul while adding additional functionality to the modal dialog.
Thanks for your feedback Franz, I’m glad the article was helpful!
Hi Justin,
This issue killed my 3 days time.. (headbang) to me. You have given really an awsome solution.
Really thanks…
Anjali from India.. :)
Hi Justin,
This issue killed my 3 days time. (headbang) to me. Really you have given an awsome solution.
Thanks you very much..
Anjali from india… :)
Hi Anjali,
I’m glad the solution was useful to you, thanks for letting me know!
Cheers,
Justin
It didn’t worked for me in IE9.. :-(
Any alternatives..?.
Strange that it didn’t work in IE9. Can you test the test code I posted in a followup article at: https://jwcooney.com/2013/01/31/showmodaldialog-example-code-and-some-tips/ I just ran a test of this sample code and it worked without any problems. Hopefully it will work for you also. Let me know!
Thank you so much!! I have encountered the problem as you described. May give it a try. Hope it works.
Thanks for your feedback, I hope the solution works for you!
Thanks a lot Justin.. It worked exactly as what i need for my part !!
Thanks for your feedback Ramesh, I’m glad that you found the article useful.
This would work if the page that is opened in the modal dialog is your page and you have control over the content. What would you do in the case of opening up someone else’s page? (Say you’re doing an open authorization where you have to click “Allow access” to enable your application access to a third-party and you need the resulting redirect to go to the same window)
Thanks Justin. The solution worked perfectly for me. Had been trying every possible way for the last 3 days.
Hi Naren, I am happy to hear that this was useful, thanks for letting me know!
Awesome …. its works perfectly fine… Thank you
Awesome! You just saved my life :)
I’m glad the info was helpful, have a great day!