How to Make a Pop-up Window

Sometimes it's better to offer information in handy, easy to close pop-up windows that don't have all the menu items simply using HTML to open a new window does. Your guests can learn what you want without them having to leave the page and backtrack. They have many uses, for instance, you could have a link that says "Wanna know a secret?" and in the pop-up window the secret is revealed that "Boogie Jack is an alien!"

And you know, I really am an alien, too.

Seriously though, you could use them for displaying a photo, contact information, a subscription form, or many other things.

Here's a working example: Click Me!

To grab the code, just right click inside the box and choose Select All. Right click again and choose Copy, then paste it into your page where you want the link to be positioned.

Warning: Be sure when you paste the code to keep the long lines intact. You will get an error if the long lines get split. It's OK if they wrap naturally to the next line in your text editor, just don't place any carriage returns in the code.

Where you see the reference to xyz.html is where you place the link to the page you want to open.

You can opt to show toolbars, scrollbars, set the window size and allow/disallow other features within the script. You can insert a message that will display in the browser's status bar in the linking script (where it says 'Status Bar Message'). Just don't use any single or double quotation marks or special characters in the status bar message or it will break the script.

Note: As is, this script is only good for one pop-up window per page. It can be used more than once per page, but you'll need to change the name "popjack" for each separate page or it will continue to open the first link. It will need to be changed in all three locations in each use of the script.

Add a Close Button

If you'd like to include the close button I used in the window just add this simple code to the page you open in the new window:

<form> 
<input type="button" value="Close" onClick='self.close()' 
 style="background-color: #C0C292; border: solid #797C45 1px;"> 
</form>

Mmm . . . pop-up windows are almost as good as popcorn! Well, not really, but they are less fattening.

Back | Web Design Tutorials Index

Auto-open/close Pop-up Windows

JavaScript Buddy generates the code for a pop-up window that automatically opens and closes on its own. It generates a lot of other code tricks too, like a growing window, spam-proof your email address, flying text and more.

[ JavaScript Buddy Details ]

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]