MessageBox class

Description and options

Class for creating standard informational dialog windows (alert and confirm).

new BX.UI.Dialogs.MessageBox(
{
    options;
}
);

Class object options

options {object} — set if dialog window options. List of dialog options in a table:

Dialog option Type Description

message string|Element|Node Dialog window message. HTML string or DOM element.

title string Dialog window title.

modal boolean When true, dialog window opens with overlay.

cacheable boolean By default, after closing, dialog window is erased from DOM. It can be cancelled: specify cacheable: false.

minWidth number Minimal window width.

minHeight number Minimal window height.

maxWidth number Maximum window width.

onOk Function OK button handler function.

onCancel Function Cancel button handler function.

onYes Function Yes button handler function.

onNo Function No button handler function.

okCaption string OK button caption.

cancelCaption string Cancel button caption.

yesCaption string Yes button caption.

noCaption string No button caption.

mediumButtonSize boolean Default dialog window buttons have small dimensions. When parameter mediumButtonSize set as true, button size becomes standard (medium). When parameter title is set, property mediumButtonSize automatically is set as true (cancel this behaviour via mediumButtonSize: false).

buttons

MessageBoxButtons | Array

Defines set of dialog window buttons. Structure MessageBoxButtons defines the following standard sets:

MessageBoxButtons.OK — OK button.
MessageBoxButtons.CANCEL — Cancel button.
MessageBoxButtons.YES — Yes button.
MessageBoxButtons.NO — No button.
MessageBoxButtons.OK_CANCEL — OK and Cancel buttons.
MessageBoxButtons.YES_NO — Yes and No buttons.
MessageBoxButtons.YES_CANCEL — Yes and Cancel buttons.
MessageBoxButtons.YES_NO_CANCEL — Yes, No and Cancel buttons.

To create your own set of buttons, specify the buttons array BX.UI.Button.

popupOptions

object

Set of options for BX.PopupWindow.

Example

Methods

Method	Description
messageBox.show	Shows dialog window on a page.
messageBox.close	Closes dialog window on a page.
messageBox.getPopupWindow	Returns object BX.PopupWindow.
messageBox.setMessage	Sets dialog window content. HTML string or DOM element.
messageBox.getMessage	Return dialog window content.
messageBox.setTitle	Sets dialog window title.
messageBox.getTitle	Returns dialog window title.
messageBox.getOkButton	Returns OK button (class object BX.UI.Button).
messageBox.getCancelButton	Returns Cancel button (class object BX.UI.Button).
messageBox.getYesButton	Returns Yes button (class object BX.UI.Button).
messageBox.getNoButton	Returns No button (class object BX.UI.Button).
messageBox.setButtons	Defines dialog window set of buttons. Set is specified by the structure MessageBoxButtons or by array of objects BX.UI.Button. `MessageBoxButtons.OK` — OK button. `MessageBoxButtons.CANCEL` — Cancel button. `MessageBoxButtons.YES` — Yes button. `MessageBoxButtons.NO` — No button. `MessageBoxButtons.OK_CANCEL` — OK and Cancel buttons. `MessageBoxButtons.YES_NO` — OK and No buttons. `MessageBoxButtons.YES_CANCEL` — Yes and Cancel buttons. `MessageBoxButtons.YES_NO_CANCEL` — Yes, No and Cancel buttons.
messageBox.getButtons	Returns array of dialog buttons.
messageBox.setOkCaption	Sets OK button caption.
messageBox.setCancelCaption	Sets Cancel button caption.
messageBox.setYesCaption	Sets Yes button caption.
messageBox.setNoCaption	Sets No button caption.
messageBox.setOkCallback	Sets OK button caption.
messageBox.setCancelCallback	Sets Cancel button caption.
messageBox.setYesCallback	Sets Yes handler.
messageBox.setNoCallback	Sets No button handler.
MessageBox.create	Dialog window static method. options {object} — set of dialog window options (see option description in new MessageBox).
MessageBox.show	Creates and shows dialog window on a page. options {object} — set of dialog window options (see option description in new MessageBox).
MessageBox.alert	Static method for creating informational dialog windows (alert). alert(message: string \| Element \| Node, okCallback?: Function, okCaption?: string); alert(message: string \| Element \| Node, title?: string, okCallback?: Function, okCaption?: string);
MessageBox.confirm	Static method for creating confirmation dialog windows. confirm(message: string \| Element \| Node, okCallback?: Function, okCaption?: string, cancelCallback?: Function); confirm(message: string \| Element \| Node, title: string, okCallback?: Function, okCaption?: string, cancelCallback?: Function);

Examples

Creating class object

const messageBox = new BX.UI.Dialogs.MessageBox(
{
    message: "Are you sure you want delete this file?",
    title: "Confirm deleting",
    buttons: BX.UI.Dialogs.MessageBoxButtons.OK_CANCEL,
    okCaption: "Yes",
    onOk: function() 
    {
        console.log("onOk");
    },
}
);


messageBox.show();

Arbitrary button titles and callbacks

const messageBox = new BX.UI.Dialogs.MessageBox(
{
    message: "Various button titles",
    title: "Confirm deleting",
    buttons: BX.UI.Dialogs.MessageBoxButtons.YES_NO_CANCEL,
    yesCaption: "Yes caption",
    noCaption: "No caption",
    cancelCaption: "Cancel caption",
    maxWidth: 600,
    onYes: function() 
    {
        console.log("onYes");
        messageBox.close();
    },
    onNo: function() 
    {
        console.log("onNo");
        messageBox.close();
    },
    onCancel: function(messageBox) 
    {
        console.log("onCancel");
        messageBox.close();
    },
}
);

messageBox.show();

Options for BX.PopupWindow

BX.UI.Dialogs.MessageBox.show({
    message: "Text with description of this popup, located here.",
    buttons: BX.UI.Dialogs.MessageBoxButtons.OK_CANCEL,
    popupOptions: {
        bindElement: BX("yesnocancel"),
        offsetLeft: 20,
        closeIcon: true,
        events: {
            onPopupClose: function() {
                BX.UI.Dialogs.MessageBox.alert("Popup closed.");
            }
        }
    }
});