Making Popup JavaScript Window
Training and Tutorials Using JavaScript.alert and JavaScript.window
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:
- alert popup, like Windows message box
- popup browser window, contains HTML
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:
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 URL to open (complete with protocol, i.e. http://)
- The name of the window (plain text, alphanumeric, underscores allowed)
- Any window features
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:
- width & height : to set the width or height, in pixels;
- location & menu : if these are set to 'no' then the menubar and location field are not displayed;
- scrollbars : if set to 'no' does not allow scrollbars;
- resizable : if set to 'no' means the user can not resize the window;
- toolbar : if set to 'no' removes the default button bar from the new browser window.
(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:
"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.
