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.