pjs.messageBox()



The pjs.messageBox() method displays a message on the user's screen, waits for user input, then returns which button the user clicked.

Parameters

The method accepts either a string parameter or a configuration object.

String Parameter

The string is displayed in the message box, and a centered button labeled "OK" is below the message.

Configuration Parameter

The configuration object may have the following properties, most of which are optional unless otherwise indicated:

  • title - The title of the message box. The box title defaults to "Profound.js" when title is omitted. 100 character limit.

  • message - (required) The content of the message. This may be plain text or it may include HTML tags, such as <br>. 1000 character limit.

  • icon - An icon to display to the left of the message. By default, no icon is displayed–the message spans the width of the box. Available icons are: info, error, warning, question.

  • cssclass - A CSS class name to be added to each button. By default, the class is 'blueprint-button-secondary blueprint-defaults'. 100 character limit.

  • bgcolor - The background color to be set on each button, a CSS color value. By default, this is empty, and the CSS class determines the color: black. 25 character limit. (Hint: CSS classes and style sheets should be used in production code rather than hard-coding colors.)

  • fgcolor - The button text color (foreground color) to be set on each button, a CSS color value. By default, this is empty, and the CSS class determines the color: white. 25 character limit. (Hint: CSS classes and style sheets should be used in production code rather than hard-coding colors.)

  • buttonAlign - How the buttons are aligned in the message box. By default, multiple buttons are aligned to the right of the box, and a single button is centered. Available alignments: left, center, right.

  • width - The css rule for how wide each button will be. By default, width is 90px. 5 character limit.

  • buttons - an array of objects that configure the buttons displayed. A maximum of 5 buttons may be specified. If this parameter is omitted, then the defaults is an OK button with the 'Enter' shortcut. Each button configuration object may have the following properties:

    • value - (required) The text displayed on the button, and the string value returned by pjs.messageBox when the user clicks on that button.

    • shortcut - The name of a keyboard key that is a shortcut for pressing the button. Each button must have a unique "shortcut" value.

    • cssclass - For this button, overrides the "cssclass" property described above.

    • bgcolor - For this button, overrides the "bgcolor" property described above.

    • fgcolor - For this button, overrides the "fgcolor" property described above.

    • width - For this button, overrides the "width" property described above.

Examples

Profound.js Example 1
pjs.messageBox({ title: 'Message Box Example', message: 'This is a basic message box.' });

Once pjs.messageBox is called, the Profound.js program waits until the user responds. After the user clicks the OK button,the program continues.



Profound.js Example 2
var choice = pjs.messageBox({ message: 'This is an error message box with multiple choices. Do you want to continue?', icon: 'error', buttonAlign: 'center', buttons: [ {value: 'Yes', shortcut: 'Enter'}, {value: 'No', bgcolor: '#b22222', shortcut: 'Escape'}] });

Example 2 demonstrates that the user's choice can be detected. After the user clicks the a button, the value of the "choice" variable is either "Yes" or "No", depending on the button clicked.



Profound.js Example 3
var choice = pjs.messageBox({ message: 'This is a prompt with three buttons.', icon: 'question', buttons: [ {value: 'One'}, {value: 'Two'}, {value: 'Three'}] });



Profound.js Example 4



Profound.js Example 5





Profound.js Example 6





Requires releases later than PJS 4.11.1 and Profound UI V6 Fix Pack 3.2.