Creating and Manipulating Modal Popups

Occasionally, I have needed a web page to call a child page in order to display information or to be used in a way to maintain information that will then be re-displayed back on the parent page. I didn’t want the user to be able to get back to the parent page until they have performed some function on the child page.

One solution for this scenario is to use Modal Popups. 

In this tutorial, I will show how to use JavaScript’s window.showModalDialog() to create a Popup window and display information. Then return to the parent window.  We will learn about window features and how to use them to control the window’s properties, such as width and height.

In JavaScript, a window object is an open window in a browser.  A modal popup window acts like a standard dialog just like alert() or confirm() where the user cannot get back to the calling or parent window until the dialog has been dismissed.  Don’t confuse a modal window with a modeless window.  A modeless window will stay on top of its parent and allow the parent to regain focus. Modeless windows are often used to display Help information or Guidelines about the website.

Now let’s take a look at the showModalDialog method and its arguments. The syntax to create a modal popup is:

window.showModalDialog(URL of web page, arguments, features);

• URL of web page is the url of the document or web page to open as a modal popup.
• Arguments are any objects or values being passed to the new window.
• Features is a list of display options for the modal popup window.  These options are separated by a semicolon.

Here’s an example:

window.showModalDialog(‘mysimplemodalpopup.htm’, window, ‘dialogWidth:300px; dialogHeight:400px;center:yes;resizable:no;status:no;scrollbars:no;menubar:no;titlebar:no;toolbar:no;’);

In the example are the most popular features of the modal popup window.  Center will center the new window on the user’s screen. DialogWidth and dialogHeight tell the window what size it should be. The rest of the features shown indicate whether the specified feature is available in the popup window.  Browsers can also interpret the numbers 0 and 1 for the feature values (0 being a ‘no’ and 1 being a ‘yes’.)  However, it is common practice to use ‘yes’ or ‘no’ for code readability.

Now let’s walk through how to use this method:

First, create an html file called ‘parent.htm’ and add this JavaScript function to the head of the document:

<script type="text/javascript" language="javascript">

   function openPopUpWithSize(theURL, title, heightInPX, widthInPX)
   {
	   window.showModalDialog(theURL, title, 'dialogHeight=' + heightInPX + 'px;dialogWidth='+ widthInPX + 'px');
   }
</script>

Notice how the function accepts the arguments to input the width and height dynamically.

Next, in the body of ‘parent.htm’, add a button element with an onclick event that calls the ‘openPopupWithSize’ function.

<input type="button" id="OpenPopupButton" value="Open Modal Popup" onclick="openPopUpWithSize('child.htm', 'Simple Modal Popup Example', 400, 500);" />

Now, create another ‘html’ called ‘child.htm’ which will serve as the modal popup
window.  Decide what the width and height will be.  These will be the values used
in the parent.htm document when calling the ‘openPopupWithSize’ function.

Next, in ‘child.htm’, add the below function to the head of the document.

<script type="text/javascript" language="javascript">

	function closePopup() {
		window.close();
		return false;
		}

</script>

Finally, in ‘child.htm’, add a button element with an ‘onclick’ event that calls the ‘closePopup’ function.

<input type="button" id="MyModalPopup" value="Close" onclick="closePopup();" />

NOTICE:  The window.showModalDialog() method is not fully supported by Chrome 2.0 or the iOS version of Safari.  The method functions like window.open().

The showModalDialog() method also returns a value upon dismissal of the popup window.  Part II of this series about Modal Popups will discuss how this feature works and take a closer look at the relationship between the popup or child window and the main or parent window. We’ll learn how to manipulate data on the child form and return information back to the parent window.