Brief introduction
Bootbox.js is a small JavaScript library that is developed based on bootstrap modal boxes for creating programmable dialog boxes.
Unlike native alert dialog boxes, all bootstrap modal boxes generate non-blocking events. So when using the confirm() dialog box, keep this in mind because it is not an alternative to the local confirmation dialog box. Any code that depends on the user's choice must be placed in the callback function.
alert
Alert is a dialog box with a single button, pressing the ESC key or clicking the Close button closes the dialog box.
Bootbox.alert ("Your message here ... "
The HTML language can be placed in the message, such as:
Bootbox.alert ("Your message <b>here...</b>"
callback function:
Bootbox.alert ("Your message here ... " /* */
Options Option Customization dialog box:
Bootbox.alert ({ "small", "Your Title ", "Your message here ... " , /* */ }})
Confirm
Confirm is a dialog box with OK and Cancel buttons, pressing the ESC key or clicking Close ignores the dialog and invokes the callback function, which is equivalent to clicking the Cancel button.
It is important to note that the callback function is required when using confirm.
Bootbox.confirm ("is yousure? ") " /* */
Options option:
bootbox.confirm ({ "small", "is you Sure? " , /* result is a Boolean; true = OK, false = Cancel */ }})
Prompt
Confirm is a dialog box that prompts the user for input and determines or cancels, pressing the ESC key or clicking Close ignores the dialog and invokes the callback function, which is equivalent to clicking the Cancel button.
Similarly, the callback function in prompt is also required.
Bootbox.prompt ("what isyour name? ") " /* */
Options option:
bootbox.prompt ({ "small", "What'syour name? ") " , /* */ }})
Note: Prompt requires the title option when using the Options option, and the message option is not allowed.
Custom Dialog
A fully customizable dialog box method that receives only one parameter-options object. That is, when you press the ESC key, the custom dialog box does not close automatically, and you need to implement this behavior manually using the Onescape function.
Options with at least a message option, an irrevocable dialog will appear, typically used as a "loading" interface, such as:
' <div class= "Text-center" ><i class= "fa fa-spin fa-spinner" ></i> loading...</div> ' })
Options parameter Details
message
Type: String | Element
Description: What is displayed on the dialog box
Required: Alert | Confirm | Custom Dialogs
title
Type: String | Element
Description: Adds a caption to the dialog box, with a default size of
Required: Prompts
callbackType: Function
Description: Callback function
The alert callback does not provide arguments, and the function body is empty and is ignored, such as:
" I ' m an alert! ", Callback:function () {}})
The Confirm and prompt callbacks must provide the parameter result. When confirm, the result type is Boolean, which is used to determine whether or not, and when prompt, result saves the user-entered value.
Required: Confirm | Prompt
Bootbox.confirm ("Is you sure?", function (result) {//result would be true or false}); Bootbox.prompt ("What is your name?", function (result) {if(Result = = =NULL) { //Prompt dismissed}Else { //result has a value }}); onEscapeType: Boolean | Function
Description: Allows the user to close the dialog box by clicking Esc, which will invoke this option.
Default Value: Alert | Confirm | Prompt:true; Custom Dialogs:null
Required: Alert | Confirm | Custom Dialogs
showType: Boolean
Description: Whether to display the dialog box immediately
Default value: null
backdrop Type: Boolean
Description: Whether the dialog box has a background and whether the click Background exits the modal.
Undefined (NULL) display background, click Background does not trigger event
True * Show background, click Background to cancel this dialog box
False does not show background
Note: When this value is set to True, the dialog box closes only if the Onescape setting ESC can also be closed
Default value: null
closeButtonType: Boolean
Description: Whether the dialog box shows the Close button
Default value: True
animateType: Boolean
Description: Show animation effects (requires browser support)
Default value: True
classNameType: String
Description: Add additional CSS files to the dialog box
Default value: null
sizeType: String
Description: Adds the bootstrap modal size class add attribute to the dialog box wrapper, the valid value is ‘large‘ and ‘small‘ needs bootstrap 3.1.0.
Default value: null
buttonsType: Object
Description: The button is defined as a JavaScript object. The minimum definition for defining a button is:
" Your Button Text " : Function () {}
Other properties that you can set are:
buttonname: { 'Your button text', 'some-class ", callback:function () { }}
These buttoName should be:
Alert okconfirm Cancel, confirmprompt Cancel, confirm
Each of the available button options can be overridden to use custom content (text or HTML) and CSS styles. For example:
bootbox.confirm ({message:"This was a confirm with custom button text and color! Does you like it?", buttons: {confirm: {label:'Yes', ClassName:'btn-success'}, Cancel: {label:'No', ClassName:'Btn-danger'}}, Callback:function (result) {// ... }});You cannot override the callback for the buttons of the Alert,confirm and prompt dialog boxes.
Default value: null
Bootbox.js Official documents