Index

Is there a way to show a simple message box?

For simple alerts, you can just use the JavaScript alert, prompt and confirm functions. The alert function takes one argument, the string to display. It displays a dialog box with that message and an OK button. The confirm function is similar but also displays a Cancel button. The confirm function returns true if the OK button was pressed and false if the Cancel button was pressed.

The prompt function displays a textbox, an OK button and a Cancel button. It takes two arguments, the message to display and the default value of the text box. The default value is optional. The prompt function returns the text the user entered or null if the user pressed the Cancel button.

Some examples:

alert("This is an alert");
if (confirm("Would you like to win the game?"){
  winGame();
}
var name = prompt("Enter your name");

Mozilla also provides an XPCOM interface, nsIPromptService, which can be used in chrome applications for more sophisticated message boxes. You can always create your own dialogs using a separate XUL file, but it is convenient to use the prompt service if possible. The prompt service has a number of special alerts you may wish to use, some of which are described below. For others, see the nsIPromptService source.

The alert and confirm functions are similar to the normal functions except that you can supply a dialog title. For example:

// get a reference to the prompt service component.
var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                    .getService(Components.interfaces.nsIPromptService);
// show an alert. For the first argument, supply the parent window. The second
// argument is the dialog title and the third argument is the message
// to display.
promptService.alert(window,"Warning","Your computer will explode soon.");

Two similar functions, alertCheck and confirmCheck display an alert or confirmation dialog with an additional check box. Typically, this is used for 'Don't show this message again' options.

// get a reference to the prompt service component.
var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                    .getService(Components.interfaces.nsIPromptService);
// the confirmCheck function will store whether the check box was selected
in an object passed as the last parameter.
var checkResult = {};
// Show a confirmation dialog with a check box. Arguments in order are, the parent
// window, the dialog title, the dialog message, the check box label and
// a result object for the check box state.
promptService.confirmCheck(window,"Delete File?",
  "Would you like to delete this file?",
  "Don't show this message again",
  checkResult);
// If the check box was checked, the value property will be set to true,
// so set a global variable
if (checkResult.value) gDontShowAgain=true;

The last argument to the confirmCheck function is an object. When the function returns, the value property of the object will be set to either true or false, depending on whether the user checked the check box. You can also assign true to the value before the call to confirmCheck to have the check box enabled by default.

The most advanced message box function is the confirmEx function which also lets you customize the buttons that are displayed.

// get a reference to the prompt service component.
var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                    .getService(Components.interfaces.nsIPromptService);
// set the buttons that will appear on the dialog. It should be
// a set of constants multiplied by button position constants. In this case,
// three buttons appear, Save, Cancel and a custom button.
var flags=promptService.BUTTON_TITLE_SAVE * promptService.BUTTON_POS_0 +
          promptService.BUTTON_TITLE_CANCEL * promptService.BUTTON_POS_1 +
          promptService.BUTTON_TITLE_IS_STRING * promptService.BUTTON_POS_2;
// display the dialog box. The flags set above are passed
// as the fourth argument. The next three arguments are custom labels used for
// the buttons, which are used if BUTTON_TITLE_IS_STRING is assigned to a
// particular button. The last two arguments are for an optional check box.
promptService.confirmEx(window,"Save files?",
  "One or more files have not been saved.",
  flags, null, null, "Save All", null, {});

The confirmEx function's fourth argument is a set of flags indicating what buttons should appear in the dialog. Up to three buttons may appear. The order in which they appear is platform dependent. Each button is specified as a button title constant multiplied by a button position constant.

Button Title Constants:

Button Title Constants:

If you use BUTTON_TITLE_IS_STRING, you can assign a custom label to a button. Supply the label as either the fifth, sixth or seventh argument to the confirmEx function. In the last example, the third button is given the text 'Save All'.

The last two arguments to confirmEx are for an optional check box as described earlier.

Copyright © 1999 - 2005 XULPlanet.com