Question: How can I create pop-up dialog boxes without using the alert, prompt, or confirm methods?
alert, prompt, and confirm methods are useful for displaying message boxes, the words and decorations that come with these message boxes are often inappropriate or cause the user unnecessary alarm.
For example, suppose that we want to extend a personal gesture of thanks to a user for visiting one of our web pages. We think it would be fun if a pop-up box displayed the words, "Thanks for visiting our web site." To accomplish this, we might use the alert method, as follows:
On Netscape Navigator, however, this code results in a pop-up box displaying the unsettling and confusing message, "JavaScript Alert: Thanks for visiting our web site." Clearly, the word "Alert" is inappropriate, since all we want to do is greet the user, not scare him.
The other methods have drawbacks, too. For example, the confirm method is also confusing because "OK" and "Cancel" buttons are displayed with the message, and the user will wonder which one to push.
The
prompt method is even worse; not only does it have the same two buttons, but it also has an input field.
This is clearly not appropriate for a simple greeting box. We are only trying to greet the user, not solicit input, so the input field will confuse the user.
Fortunately, JavaScript provides means through which users can design and implement their own, custom pop-up windows. The open method, a method of the window object, makes it possible for JavaScript programmers to arbitrarily open new document windows on the fly. Thus, if you can write the HTML for it, you can build custom dialog boxes as fancy as you like.
The open method allows programmers to control window properties such as size, scroll bars, and even the presence or absence of menu and tool bars. Opening a small pop-up window to display another document or image is easy, as the code below demonstrates:
window . open ('welcome.html', '', 'width=400,height=200');
The first parameter in the open method is the URL of the pop-up box document or image. The second parameter, which in most cases may be left blank, is used to give the new window a name, in case it is referenced in other JavaScript code. The third parameter, obviously enough, contains a comma-separated list of window attributes. (For more information on window attributes that can be set with the window . open method, consult the JavaScript Guide.)
The source code for welcome.html might appear as follows:
Pay particular attention to the fact that welcome.html is really just a JavaScript-enhanced form with a single element, a push button. When the user pushes the OK button, the window . close method is called to close the pop-up window.
Although the window . open method is useful for displaying small HTML pop-up documents, it still has one problem which has not yet been adequately resolved by the designers of JavaScript: Usually, when a dialog box pops up, most users are accustomed to the fact that the original window cannot be accessed until the dialog box is cleared. In JavaScript, there are only limited provisions to control which browser window remains on top when multiple windows are open. If you are not careful with how your pop-up windows are used, the user might ignore the pop-up window and continue interacting with the main window. While this is clearly a problem, we anticipate that the developers of JavaScript will eventually address this shortcoming.
Charlton Rose
November 28, 1996