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 
Leave a comment