Creating and Manipulating Modal Popups Part II

Feb 13, 2012
HTML JavaScript
By

In the last post, Creating and Manipulating Modal Popups, I discussed what the JavaScript method showModalDialog is used for and how to implement it in your website.

Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent.

User Experience

Manipulating data in the popup window can be tricky, because modal windows do not function like normal ones. In a normal window, when your page does a postback, the postback is rendered in the same window as the original page.  In a modal popup window, the postback opens a brand new window to re-render the popup. However, the original popup window does not close. In addition, this new window does not conform to the window feature settings defined in the parent page’s showModalDialog(), instead it opens based on the browser’s default for new windows.

Not good. Now your user is looking at two versions of the popup, the original (opened by the parent.htm page) and a second normal sized “non-modal” view of it (opened by the postback), which leaves the user with a poor experience of your website.  To circumvent this catastrophe, you’ll want to use the <base> tag in the head of your popup page.  Here is the syntax of the <base> tag:

<head>
   <base target=”_self” />
</head>

This simple tag will ensure all postbacks of the child page are re-rendered within the same popup window object.

The Pass Back

Next, let’s examine the window.returnValue property, which is used to return a value or object back to the parent window. The showModalDialog method returns a value back to the parent window only when the window.returnValue property has been set in the popup.

Below is the parent.htm page which includes the javascript to open the child window and a textbox in the body which will be used to display data passed in from the child.htm page.  Try it by copying the markup into a new page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Modal Popup Example</title>
<script type="text/javascript" language="javascript">

   function openPopUpWithSize(theURL, title, heightInPX, widthInPX)
   {
	   document.getElementById("MyParentTextbox").value = window.showModalDialog(theURL, title, 'dialogHeight=' + heightInPX + 'px;dialogWidth='+ widthInPX + 'px');

   }
</script>
</head>
<body style="text-align: center;">
Modal Popup Example <br/>
Parent Page
<br/> <br/>
<input type="text" value="Original Value" id="MyParentTextbox" />
<br/><br/>
<input type="button" id="OpenPopupButton" value="Open Modal Popup" onclick="openPopUpWithSize('child.htm', 'Simple Modal Popup Example', 400, 500);" />
</body>
</html>

First, let’s examine the openPopUpWithSize function.

function openPopUpWithSize(theURL, title, heightInPX, widthInPX)
   {
	   document.getElementById("MyParentTextbox").value = window.showModalDialog(theURL, title, 'dialogHeight=' + heightInPX + 'px;dialogWidth='+ widthInPX + 'px');

   }

Notice the element “MyParentTextbox” is being set to the window.showModalDialog() method.   When the popup window is closed, the browser comes back to this function and continues processing, assigning the return value of showModalDialog() to “MyParentTextbox” and displaying it on the page.

Now copy the child.htm markup from below into another .htm page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Modal Popup Example</title>
<script type="text/javascript" language="javascript">

	function closePopup() {

		window.returnValue = document.getElementById("MyTextBox").value;
		window.close();
		return false;
		}

</script>
</head>
<body style="text-align: center;">
Modal Popup Example<br/>
Child Page<br/>

<br/><br/>
Enter a value:   
<input type="text" id="MyTextBox" value="" />

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

A textbox has been added to the popup page to allow a user to enter a value, and when the Close button is clicked, the closePopup() function sets the window.returnValue property to the value of the textbox.  By doing this, the showModalDialog value is set which returns the value back to the parent.htm page.  If the window.returnValue is not set before closing the child window, then the showModalDialog() method will return ‘undefined’.  Setting window.returnValue before closing the popup window is key to passing data back to the parent window.

Give it a try in your website.

The Features

Here is a list of useful features for opening modal popups:

Parameter Value Description
fullscreen yes/no Show the popup window in full screen mode.
height pixel value The height of the popup window in pixels.
hotkeys yes/no Disables hotkeys in the popup window.
If this is set to ‘yes’ only browser-essential hotkeys like ‘quit’ are
enabled.
innerHeight pixel value Sets the height of the “document” part of the popup window.
innerWidth pixel value Sets the width of the “document” part of the popup window.
left pixel value The popup window is placed this many pixels from the left of screen.
location yes/no Should the location bar of the browser show on the popup window.
menubar yes/no Should the menu bar of the browser show on the popup window.
outerHeight pixel value Sets the height of the outer part of the window, including the
“chrome” or border.
outerWidth pixel value Sets the width of the outer part of the window, including the
“chrome” or border.
resizable yes/no Indicates if the user can resize the popup window.
scrollbars yes/no Indicates if the scrollbars show on the popup window.
status yes/no Indicates if the status bar shows on the popup window.
titlebar yes/no Indicates if the titlebar shows on the popup window.
toolbar yes/no Indicates if the toolbar shows on the popup window.
top pixel value The popup window is placed this many pixels from the top of screen.
width pixel value The width of the popup window in pixels.

I tend to use showModalDialog in custom business web applications where the user experience is enhanced by exposing extraneous information based on the parent page in a separate window.  Often the popup window must query a database, and then allow the user to interact with the data in some way before returning back to the parent form.  The showModalDialog method provides a simple way to create a positive user experience and easily pass data back to the parent page.

–Happy Coding!

Author: Kim S. Teeple
Kim S Teeple graduated with a Communications Degree from Ohio State University, but found she had an aptitude for computers soon after college. She joined The Limited's IT department as a helpdesk analyst in 1995 and quickly moved into web development. In 1998, she moved back to her home town of Crestline, Ohio to join Pittsburgh Glass Works as a Systems Analyst. She has also done some free lance web development work for various companies.