web blazonry web development scripts and tutorials HTC One 4G Android Phone in Silver Get best price
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

Javascript Home


image scripts
  Image Load Order
  Mouse Overs
  SlideShow

JavaScript Resources
  Free JavaScript Books(new)
  Recommended Sites
  Bestselling Books

Bookmark and Share




JavaScript: Popup Windows

This how-to article about JavaScript popup windows shows you how to create a basic popup window, then shows you how to create several types of more complex popups. You will also get to play with demos and get source code and a reference list of options for popups.

info now available in SpanishRead this how-to article in Spanish language thanks to Maria Ramos from Webhostinghub.com.

JavaScript allows you to create (open) new windows. Run whatever HTML code you wish in these windows. You can even have actions in one window effect another window.

Example 1: Create a Basic Popup Window

Let’s learn how to open a new popup window. The code is straightforward. (It gets more complicated when you add different options, and when you navigate around multiple windows.)

Open Window Example 1

The code used to open basic popup for Example 1 is:

window.open‘win1.html’,‘Window1’,
‘menubar=no,width=430,height=360,toolbar=no’);

Looking at the code snippet above, you need to define the following (listed in the order they appear in the code snippet) for your own window:

  1. specify the web page to load into the window
  2. set the title of the window
  3. specify the options for the window


How To Close Your Popup Window with Code

Now let’s close that window with code (not just killing the browser window). If you closed your popup window from above, Open Window Example 1 again.

Look towards the bottom of the window. There is a link to “Close this Window.”

Here is the code:

<a href="javascript:self.close()">close window</a>

This was a really basic, simple example that created an ugly popup window. We focused on the mechanics here. There are lots of ways to make the window look better. At the bottom of this page is a reference of options available to you.


Example 2: Interacting With Two Windows

In this example we change which window currently has the focus. In other words, we use code to set which window is “on-top,” or highlighted.

To navigate among windows, give your popup window a name, or assign it a variable. To do this, just set the name (variable) you want, equal to the window.open statement.

The code looks like:

win2 = window.open("win2.html", "Window2", "width=310,height=600,scrollbars=yes");


To change the focus to a different window, you need to refer to that window. To do so, use the window name followed by the focus() method.

To refer to the window that opened this window, use: opener.focus();

Opener is a special JavaScript keyword which refers back to the window that opened the current window. If nothing has been opened, it is not a defined object.

Let’s see it in action:

Click Here to Open Window Example 2

If you opened Window Example 2, and clicked the link at the bottom that says “Click Here to Change the Focus” then you should have returned to this page via the focus change. If you didn’t, what are you waiting for?

The line of code to change focus is:

<a href="javascript:opener.focus()">change focus</a>

We can even close Window Example 2 from this link. Use the following statement:

<a href="javascript:(win2.close()">close</a>

 

Example 3: Writing To a Popup Window From Another Window

You can open a window. Then, after it has been opened, you can write content into that window from your original window.

The best way to clarify is by trying it.

Click here to open Window Example 3

After the window opens, switch back to this page and now click here to write some text into our popup window.

You may have to switch back and forth between the windows to see that something was written into the popup window. Darn cool.

The statements used are:

// open the window
win3 = window.open("", "Window3", "width=320,height=210,scrollbars=yes");

// write to window
win3.document.writeln("<h2>This is written to Window 3 by the main window</h2>");

 

Example 4: Using a Popup for Site Navigation

One possible use of a popup window is for site navigation. You can place links to different sections of a web site in a popup window. While navigating the site, the whole site links are always present.

I don’t recommend doing this because of usability issues. I like to present it because itoffers a nifty learning tool. It also might generate some better ideas of a good use of popup windows.

When using links in an opened window, you need to reference the ‘opener’ window to have links opened in that window. Do this by writing a function in the opened window which points links to the opener window. This is best shown with an example:

Click here for a Navigation Window Example 4

Here is the code:

function openURL(sURL) {
opener.document.location = sURL;
}

<a href="javascript:openURL('home.html')">Go Home & </a>

 

Options for JavaScript Popups

We just worked with really simple looking popup windows. You have numerous options that let you control how they look. Here is a reference:

Option Values Description Version
location yes|no Does the location bar show? ver 1.0
menubar yes|no Does the menubar show? ver 1.0
scrollbars yes|no Do scrollbars show? ver 1.0
status yes|no Does the status bar show| ver 1.0
titlebar yes|no Does the titlebar show? ver 1.0
toolbar yes|no Does the toolbar show? ver 1.0
resizable yes|no Can you resize the window? ver 1.0
height pixels height of window ver 1.0
width pixels width of window ver 1.0
directories yes|no Does the personal toolbar show? ver 1.2
innerHeight pixels specifies the inner height of window ver 1.2
innerWidth pixels specifies the inner width of window ver 1.2
screenX pixels specifies distance from left edge of screen ver 1.2
screenY pixels specifies distance from top edge of screen ver 1.2


I hope you found this useful. Be sure to check out my other how-to articles and tutorials.

 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2013. astonishinc.com   All Rights Reserved.