Making Popup JavaScript Window

Training and Tutorials Using JavaScript.alert and JavaScript.window

© Guy Lecky-Thompson

JavaScript Class Training showing how to create a popup JavaScript window via the alert function and window JavaScript class, using HTML and JavaScript window.open method

There are two types of popup window that can be opened using JavaScript:

Before implementing any popup windows, however, it is worthwhile to remember not to overuse them as they can annoy the user. In addition, users might have popup blocking software in place, and so it might make more sense to use an alternative method such as an unblockable popup using HTML styles.

Using the JavaScript alert Function

The alert function in JavaScript is really a method of the JavaScript window object. This means that the function could also be called as window.alert and not just alert. When using these base class methods in handlers, it is often a good idea to call them using the fully qualified method.

Alert only takes one parameter - a string containing the text to display. There are variations that allow multiple buttons (the basic box only displays a single Ok button) and other extensions, but these are not necessarily supported by all platforms.

A simple example of using the alert method is as follows:

<input type="submit" value="Click Me" onClick="alert('You clicked the button!');">

A more useful use would be to include the method call in a function that checks the validity of a text entry area. The function would then be called from the onBlur event handler to trap movement away from the field (i.e. using the tab key, or a mouse click).

Using the JavaScript window.open Method

The base JavaScript class also contains a method for opening a new web browser window, containing an HTML page, which offers additional possibilities. Again, it is part of the window class, so can be called with window.open as well as just open by itself, except when called in an event handler, when the full stanza must be used.

The window.open method takes three parameters:

The last of these bears some explanation. A window feature enables the programmer to turn off (or on) some of the normal browser features such as menu bars, and also perform other display tricks. These features are specified as name=value tuples, comma separated.

The complete list of supported features is quite long, but here are the more common ones:

(Point to note : for those 'yes/no' options, they tend to be set to 'yes' by default, and must each be explicitly set to 'no' by the window.open call.)

So, to create a new browser window, containing some HTML, fixed to 200 x 200 pixels in size, with no scrollbars, the following would be used:

window.open( "http://mypage.com/msgbox.html",
"message_box",
"width=200,height=200,resizable=no,scrollbars=no" );

Beyond this, the JavaScript window.open method can be used for a whole raft of different design projects, but the web programmer must always be aware that pop-up blockers may well prevent the window from being shown, and steps need to be taken to make sure that legitimate uses actually get through.


The copyright of the article Making Popup JavaScript Window in Javascript/Java Programming is owned by Guy Lecky-Thompson. Permission to republish Making Popup JavaScript Window must be granted by the author in writing.



Comments
May 6, 2008 7:18 AM
Guest :
How do you make the popup window print?
Page:
1 Comment:

Post this Article to facebook Add this Article to del.icio.us! Digg this Article furl this Article Add this Article to Reddit Add this Article to Technorati Add this Article to Newsvine Add this Article to Windows Live Add this Article to Yahoo Add this Article to StumbleUpon Add this Article to BlinkLists Add this Article to Spurl Add this Article to Google Add this Article to Ask Add this Article to Squidoo