popup windows

Opening New/Popup Windows

These popup window methods demonstrate:

opening a new window
pushing content to the new window (from the starting page)
changing content of the initial window (from the new window)
closing the popup window (from the starting page)

Method 1 (Beginner)

This method of opening a new window makes use of the 'target' attribute, which is not valid for the XHTML 1.0 Strict standard. Pages using this method for opening a new window can, however, be validated against the XHTML 1.0 Transitional standard.
Check this Page

This method is the easiest way to open a new, named window from a hyperlink (as opposed to the default behavior of having the new webpage open in the same window). No javascript is required to open the new window, however the developer has no control over the size or properties of the window. The resulting window will be a standard browser window, and will either be maximized or the size of the last non-maximized window that the user closed normally.

Additional web content can be 'pushed' to the new window by putting a 'target' property in the anchor tag and using the window name. Similarly, javascript can be used to close the new window by from the initial window by invoking the self.close() method and targetting the new window by name.

To implement, create two popup window pages - popup.html and popup2.html. Then put this HTML code in your starting webpage:

<a href="popup.html" target="myWindow">Open window ("myWindow")</a> 
<a href="popup2.html" target="myWindow">Push content to myWindow</a> 
<a href="javascript: self.close();" target="myWindow">Close myWindow</a>

Try it out:

Open window ("myWindow")
Push content to myWindow
Close myWindow

Method 2 (Intermediate)

This method uses a javascript function to open a new, customizable window from a hyperlink (as opposed to the default behavior of having the new webpage open in the same window). The developer has control over the size and properties of the new window.

In this example, the resulting window will be 600 pixels wide and 400 pixels high, with many of the standard browser features disabled, other than the title bar and scrollbars. Additional pages can be 'pushed' to the same new window by putting a 'target' property in the anchor tag using the window name.

To implement, put this HTML code in your starting webpage:

<a href="javascript:popWinOpen('popup.asp',600,400);">Open window ("myWin")</a> 
<a href="popup2.html" target="myWin">Push content to myWin</a> 
<a href="javascript:pushURL('popup2.asp');">Push content to myWin (javascript)</a> 
<a href="javascript:popWinClose();">Close myWin</a>

Try it out:

Open window ("myWin")
Push content to myWin
Push content to myWin (javascript)
Close myWin

You'll also need to include the following javascript functions:

var myWin;
myWin = "";
function popWinOpen(zURL,zWidth,zHeight) {
var popFeatures = "width=" + zWidth + ",height=" + zHeight + ",toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=1,resizable=1";
myWin = window.open(zURL,'myWin',popFeatures);
myWin.focus();
}
function popWinClose() {
// this will close the same 'myWin' popup that we opened
myWin = window.open('','myWin','');
myWin.close();
}
function pushURL(myURL) {
// this will load a new URL into the 'myWin' popup that we opened, or open a new 'myWin'
if ((!myWin.closed && myWin.location)) {
myWin.location = myURL;
} else {
var popFeatures = "width=600, height=400, toolbar=0, location=0, directories=0, status=0, menuBar=0, scrollBars=1, resizable=1";
myWin = window.open(myURL,'myWin',popFeatures);
}
myWin.focus();
}

[the end]

The method(s) on this page have been tested on Windows XP, using Internet Explorer 6.0, Firefox 1.5, and Netscape 7.2.