Popup or Popunder

In the two tutorials so far we have looked at two different ways to create and populate a popup window. Now we are goint to look at how we can tell the browser whether the original window or the new window should appear in front of (or behind) the other windows on your screen.

The first thing you need to do is to make sure that the value returned by your windows open function is assigned to a variable. We did this in the second tutorial but not in the first so if you are using an external HTML page for the new window content you need to make a minor change to your script as follows:

TheNewWin = window.open('mywin.htm',etc

We now have a means of referring to the new window so as to tell it whether to display in front of or behind the other windows on the screen.

The window that appears in front of all of the others on your screen and which has the different coloured title bar to indicate that it is the current window has the focus in Javascript terminology. To ensure that the new window appears in front of all of the others we would add the following code to our Javascript after the window (and its content) has been created:


Of course this window usually appears in front anyway as it is the one that was just created but you can also use this code at any subsequent point in your main page processing to bring the window to the front. For example the following code would bring the new window to the front after a thirty second delay:


We can also tell the window to move to the back of the screen behind all of the other windows in order to create what is known as a "popunder" window using the onblur() method like this:


Combining these two we could place the new window behind the existing one when it is first created and set it to appear in front at a later time.

It is not just from the original window that we can change the "stacking order" of the new window. It can be done from within the new window itself using the following code:


This same command will work with whichever window currently has the focus to move that window to the back and bring all of the other windows forward one spot.

Finally, there is a way that the new window can refer to the window that originally opened it. This is done as follows:


So now you know how to swap your windows around on the screen. Remember not to do this too much or at unexpected times though or you will get your visitors totally confused.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow