Bootbox.js Official documents

Source: Internet
Author: User

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

callback

Type: 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    }}); 
onEscape

Type: 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

show

Type: 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

closeButton

Type: Boolean
Description: Whether the dialog box shows the Close button
Default value: True

animate

Type: Boolean
Description: Show animation effects (requires browser support)
Default value: True

className

Type: String
Description: Add additional CSS files to the dialog box
Default value: null

size

Type: 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

buttons

Type: 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.