Popup Windows2. Generated Popups |
|
Join the DiscussionMore of this FeatureThe 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 = window.open('','name','height=255,width=250, 
toolbar=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=no');
TheNewWin.document.write('<!DOCTYPE html
PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html
xmlns="http:\/\/www.w3.org\/1999\/xhtml">');TheNewWin.document.write('<head><title>Popup<\/title> <\/head><body
style="overflow:hidden"
bgcolor="#ffffff"> <p>This
is an example of a popup
window.<\/p>');TheNewWin.document.write('<p>Provided that your web browser
supports Javascript then this window should be 250 pixels
wide and 255 pixels high, there should
not');TheNewWin.document.write(' be any toolbars etc. and the window cannot
be resized.<\/p><hr \/> <p
align="right"><a
href="#"
onclick="self.close();return
false;">Close');TheNewWin.document.write(' Window<\/a><\/p> <\/body> <\/html>');return false; } We use exactly the same window.open 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. |
Explore JavaScript