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