So You Want a Floating or Pop-up Window
alert() method is often used in many ways such as displaying a simple message in a window when a person enters or leaves a web-page. Figure 1 shows a simple alert box generated with the code in Listing 1.
Figure 1: An Alert() box
Listing 1: A simple page with an alert()
<html> <body onload="alert('This is an alert...')" > <h1>I'm Floating Window !</h1> <p>This is a full web page!</p> </body> </html>
alert() method creates a pop-up that is generally tied to the underlying window that displayed it. As such, it is not a freely floating window. You must close the alert before you can get back to the underlying window. Additionally, the alert dialog window can't be moved outside of the browser area of the original window.
prompt() functions are similar to
alert() in that they are tied to their underlying windows as well. Neither allow you to get back to the underlying window until you close the new dialog window they create.
So how do you do a pop-up window that floats freely?
Instead of using the
alert(), you can call the
open() function to display a window that is independent from the window that generates it. The
open() function can call another HTML file to open separately. This new window can also be sized via the
open() function's parameters.
Figure 2 shows as simple window that is displayed by using the
open() function. The code in the underlying window is shown in Listing 2.
Figure 2: A window displayed using
Listing 2: Using window.open()
<html> <body onLoad="window.open("PopIt1.html","","height=200,width=400,scrollbars=no")"> <h1>The Main Window!</h1> <p>This is the text on the main windows!</p> </body> </html>
Listing 2 uses the
windows.open() function to display a window based on the code in a file called PopIt1.html file. In this case, the
open() function is called in the
onLoad method of the body tag. The result is a window that 200 high and 400 wide being created that is independent of the original page.
The new window is completely independent of the original window. You can move it around the entire screen, you can close it, or you can leave it open while closing the original window. This is a fully functioning, floating window.
Listing 3 shows an example of using the
open() function within two other functions to call new floating windows. You can see that one window is called with the page load similarly to what was done in Listing 2. This page, however, also includes two buttons that let you create the two different windows as many times as you want by clicking the buttons.
Listing 3: Creating new floating windows
To make things interesting, the PopIt2.html page includes a call to
alert() when the page loses focus by including a call to alert on the body's
onblur() method. You can see the code for PopIt2.html in listing 4.
Listing 4: The PopIt2.html code
<html> <header> <title>My Popped Window Two</title> </header> <body onblur="alert('Not nice...')" > <h1>I'm Floating Window Number Two!</h1> <p>This is a full web page!</p> </body> </html>
alert(), confirm(), and prompt() will display a window, the windows are limited in what they can do, and worse, they are tied to the underlying window instead of being free floating. Using the