About of AntMessageBox

AntMessageBox, is a pre-defined jQuery ui dialog encapsulated in JavaScript object. Dialog boxes from AntMessageBox are able to contain html (v4 or v5) and optionnal callback binded functions on click event of buttons.


3 available types of dialog box of AntMessageBox :

Type is defined on display of MessageBox. Some settings of each types are available to customise them. Demo


Have a question about AntMessageBox ? Please use GitHub Issue.

Documentation about AntMessageBox

Fields Description
title [string] The title of the message box
content [string] The content html
box [object] The container of the jQuery-ui-dialog. Parameters of jQuery ui-dialog are available as follows:
sample : MyDialog.box.dialog( "option", "modal", true );
callbackOkParams [object] An object to store parameters to fired callback function on click event of "ok" button of dialog box
usage : MyDialog.callbacksOkParams = {"first-name":"McQueen", "last-name":"Flash"}
callbackCancelParams [object] An object to store parameters to fired callback function on click event of "cancel" button of dialog box
Methods Parameters
initDialogBox
Method to define custom settings
p_title [optionnal string] The title of the message box. When message dialog box is displayed with an empty title, a default title is used.
p_elmt [optionnal string] String to send to jQuery to select the targeted element of DOM to receive the dialog box
p_content [optionnal string] The content html
MsgDialogBox
Display basic message box.
p_content [optionnal string] The content html
p_modal [optionnal boolean] Optional boolean, false by default, to define if the message dialog box is modal or not.
AlertDialogBox
Display modal dialog box like alert function of JavaScript.
p_content [optionnal string] The content html
p_ok_click_callback [optionnal function] Optional or anonymous function, called when click event of button "ok" is fired
p_label_ok [optionnal string] Optional parameter to modify the label of button. "Ok" is the default label.
ConfirmDialogBox
Display modal dialog box like confirm function of JavaScript.
p_content [optionnal string] The content html
p_ok_click_callback [optionnal function] Optional or anonymous function, called when click event of button "ok" is fired
p_cancel_click_callback [optionnal function] Optional or anonymous function, called when click event of button "cancel" is fired
p_label_ok [optionnal string] Optional parameter to modify the label of button. "Ok" is the default label.
p_label_cancel [optionnal string] Optional parameter to modify the label of button. "Cancel" is the default label.

Samples of AntMessageBox

MsgDialogBox
Open MsgDialogBox on button click event Try it
Open modal MsgDialogBox on button click event Try it
Open modal MsgDialogBox, on button click event, with advanced settings and content Try it
AlertDialogBox
Open AlertDialogBox on button click event with callback function Try it
ConfirmDialogBox
Open ConfirmDialogBox on button click event with callbacks functions one of which is anonymous Try it
Turn ConfirmDialogBox into prompt dialog box Try it

Tips of AntMessageBox

How to replace alert function of JavaScript by AlertDialogBox ?


window.alert = function (content, callback) {
    var MyDialog = new AntMessageBox();
    MyDialog.AlertDialogBox(content, callback);
}
							

note: AntMessageBox don't stop script during execution like the alert function of JavaScript do.

How to access to "Ok" button of dialog box ?

Buttons are in array. The first button is "Ok" and second is "Cancel". You can access to "Ok" button like this:

MyDialog.box.dialog("option").buttons[0];