Developers will sometimes want the modal popup to be more than just a fancy version of the common alert() function. In this case, one has the option of creating a fully functional Web form in the Web page called from the showModalDialog function.
The Problem with using ShowModalDialog
The problem with the showModalDialog function is inconsistent support across the various Web browsers. Chrome still refuses to show the new form in a modal manner, instead showing it like a popup window, and Opera flat out refuses to support the command. Firefox supports the showModalDialog function nicely, but Internet Explorer will open a new Web page if the modal dialog form is submitted or redirected.
Fixes to Use to get showModalDialog Working Properly
This issue with IE can be corrected using the <base target=”_self” /> tag as I explain in a previous article.
Likewise, one can correct Chrome’s lack of modal support by using a traditional alert() function in the HTML body’s onBlur event. Just set the text of the alert to remind your users that they need to complete work on the modal window before working on something else. Using the alert() function is a simple and effective fix for Chrome that will not interfere with IE or FireFox where the dialog is properly modal.
One should also consider alternate solutions such as the JQuery Dialog widget, or the AJAX Control Toolkit ModalPopup . These can also be powerful tools that may or may not be more appropriate to your Web application based on the requirements.
Example Code for using the ShowModalDialog function
The Main Page (Parent Page)
Below I’m providing the code for the parent page called OpenModal.aspx. This page calls another page (the child page) called ModalForm.aspx when a button is clicked.
The Modal Page (Child Page)
Below is the code for the child page called ModalForm.aspx. The child page has a button on it to simulate a form post event. This is done to show that by using the <base target=”_self” /> tag, the form post event will not open up a new window in Internet Explorer.
6 thoughts on “ShowModalDialog – Example Code and Some Tips”
Good article. I like this style of pop up much better than the alert kind.
Good article Justin! I like this style of pop up much better than the alert kind.
Hi, glad you found the article interesting Luvy!
Yes, showModalDialog is certainly a step up from the alert popup, and it’s nice that it can also be used as a modal/completely functional Web form that can handle postbacks.
PS the worked great thanks for that too
Thanks for your feedback Steve, I’ve posted a new article with a code example where the modal popup saves to the session state and then closes itself using self.close(). I hope you find it useful, cheers!