Sometimes when putting together a Web-based application, you will need to show a custom modal dialog that is a bit more complex than the inbuilt JavaScript alert( or confirm( dialogs, and that unlike a jQuery modal dialog will run as a separate window. Your best option in this case is to use the JavaScript ShowModalDialog function. Since ShowModalDialog behaves differently than a traditional Window.open command, you’ll have to keep a few things in mind when developing your solution.
Overview of the Challenges of Using ShowModalDialog
In the example code below I am showing a simple parent page that calls a child page as a modal popup window. The catch that this example is illustrating is how to communicate back from the modal child page to the parent page. In this case, the example shows how to pass back two parameters to a function on the parent page. This is actually handy to know how to do if you want to put together a modal form that can communicate back to its calling page.
When you are using the ShowModalDialog command, you do not have access to the window object that you can reference when you use the non-modal window.open( command to open a pop-up. This introduces a number of problems in having your pages communicate with each other since you can’t simply address the parent page using parent.functionName(.
Handling Communication from the Modal Child Page to the Parent Page
The key in allowing the child page to access the DOM of the parent page is to pass to the child page the window object of the page in the ShowModalDialog argument. The child page can then catch and use the passed reference to the window object using window.dialogArguments. In this example, we pass the parent page’s window object to the child page, which then on button click calls a function on the parent page via the passed window object to populate a text area on the parent page with information that a user entered into a text area on the child page.
In the example pages below I show how to pass just two parameters, but you can certainly grow this however much you want now that you have the concept down of how to communicate between parent and modal child pages. To run the code, copy each to its own page called testParent.html and testChild.html, and then open up testParent.html to begin your testing.
An Important Catch
One thing to note is that since the parent page is passing its window object to the modal child page, you will lose all reference to the window object if the child page posts or refreshes itself. The best possible workarounds for keeping the window object of the parent page would be to either use AJAX on the child page for server-side operations, or to encapsulate the child page in an iFrame which keeps a reference to the parent page window object no matter how often the child page refreshes or posts back to itself.
testParent.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>IFrame</TITLE>
<script language="JavaScript">
function showPage(){
window.showModalDialog('testChild.html', window, 'dialogHeight:300px; dialogLeft:200px;');
}
function returnedData(strReturnData, strReturnVariable2){
var retinfo = document.getElementById('returnedInfo');
retinfo.value='data returned: Variable 1 = ' + strReturnData + ' and Variable 2 = ' + strReturnVariable2;
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<form id="ParentForm">
<input type="button" value="Click Here" onClick="showPage()">
<br>
<input type="text" id="returnedInfo">
</form>
</BODY>
</HTML>
testChild.html
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script>
function reloadParent(){
var testData = document.getElementById('txtTextData').value;
var objPassedParentWindow = window.dialogArguments;
objPassedParentWindow.returnedData(testData,'secondParameter');
}
</script>
</head>
<body>
<input type="text" value="test data" id="txtTextData" ><br>
<input type="button" onClick="reloadParent()">
</body>
</html>
Justin Cooney 
Leave a comment