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!
