ShowModalDialog – Example Code and Some Tips

ShowModalDialog Example

ShowModalDialog Example

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>

6 thoughts on “ShowModalDialog – Example Code and Some Tips

    • 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.

  1. Pingback: ShowModalDialog - Example Code and Some Tips | Web App Dev | Scoop.it

  2. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s