Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent.
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.