Using the JavaScript showModalDialog function is a useful way for Web developers to create a modal popup. Unlike other popup functions, the showModalDialog function makes use of two separate HTML pages… one page as the parent page, and one page as the content of the modal dialog.
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.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language=javascript type="text/javascript">
function openModalForm() {
window.showModalDialog('ModalForm.aspx', '', 'status:1; resizable:1; dialogWidth:900px; dialogHeight:500px; dialogTop=50px; dialogLeft:100px')
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="Open Modal Dialog" onClick="openModalForm();" />
</form>
</body>
</html>
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.
Likewise, the Chrome bug of not treating the child window as modal is corrected using the modal nature of a JavaScript alert() message that is triggered onBlur().
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Page_Load(sender As Object, e As System.EventArgs) If Not Page.IsPostBack Then TextBox1.Text = "New Page Load" Else TextBox1.Text = "Form submission" End If End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> </script> <base target="_self" /> </head> <body onblur="alert('Please complete the form before you continue.');"> <form id="form1" runat="server"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </form> </body> </html>
Justin Cooney 
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.
any chance you could post a small sample that closes the form on clicking a button. I run some JavaScript to validate, and do self.close(). and then want to run server side code to save off values. but the click event of the button does not seem to fire.The object is to save off some values to a session variable that hopefully can be saved from the calling page. Thanks
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!