Javascript Generated Popup Windows

The page Basic Popup Windows describes how you can use Javascript to control the appearance of a new browser window that will be used to display an existing web page. Javascript can of course go further than that and create the entire page that is to be displayed.

In this tutorial we will produce the same output as that earlier example except that this time we will not use a predefined page. Here's the code:

function openPopup() {
TheNewWin ='','name','height=255,width=250,
continued from previous line toolbar=no,directories=no,status=no,menubar=no,
continued from previous line scrollbars=no,resizable=no'); TheNewWin.document.write('<http:\/\/\/TR\/
continued from previous linexhtml1\/DTD\/xhtml1-transitional.dtd"><html
continued from previous line xmlns="http:\/\/\/1999\/xhtml">');
continued from previous line<\/head><body style="overflow:hidden" bgcolor="#ffffff">
continued from previous line <p>This is an example of a popup window.<\/p>');
TheNewWin.document.write('<p>Provided that your web
continued from previous line browser supports Javascript then this window should be
continued from previous line 250 pixels wide and 255 pixels high, there should not');
TheNewWin.document.write(' be any toolbars etc. and the
continued from previous line window cannot be resized.<\/p><hr \/> <p class="right"><a
continued from previous line href="#" onclick="self.close();return false;">Close');
TheNewWin.document.write(' Window<\/a><\/p> <\/body>
continued from previous line<\/html>');
return false;

We use exactly the same Javascript method only this time we leave the first parameter blank. The other difference this time is that we assign the value returned from the open call so that we can reference the new window that we have opened to load the content into it.

We use document.write statements to generate content for our new web page exactly the same as we would if we were generating output to appear in the current web page. As it is TheNewWin that we want to write the content to and not the current page we use TheNewWin.document.write to reference the write method for that page instead of the current web page.

In this example I have used five separate document.write statements to output the page content. It doesn't matter how many statements that you use as long as the entire output of each statement is contained within a single line.

The one other thing that I have done is to make the entire code into a function so that we can include this code in a Javascript in the head section of the page and call it by specifying openPopup(); in the onclick, onload, or onunload event instead of having to include the entire code. The other point to note is that since the page to be displayed is to be generated entirely from Javascript there is nothing to be displayed when Javascript is disabled or not available. Our link call therefore now looks like this:

<a href="#" onclick="openPopup();">click here</a>

Provided that Javascript is enabled in the browser then this code will provide exactly the same result as in our basic popup example but without having to provide a separate web page to display in the new window.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow