bootbox模态框自定义dialog，fonfirm,alert控件

bootbox模态框的API

在需要模态框时执行

bootbox.confirm({});
bootbox.alert({});
bootbox.prompt({});

详细的API文档在这里！如下面的例子：前提是bootstrap已经集成进项目了！因为bootbox是基于bootstrap样式的。

如下：

bootbox.confirm({   size: "small",  message: "Are you sure?",   callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ }})

bootbox.prompt({   size: "small",  title: "What is your name?",   callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ }})

下面是常用的API:

NameTypeDescription

message

String | Element

Text (or markup) displayed in the dialog.

Required for alert, confirm, and custom dialogs

titleString | Element

Adds a header to the dialog and places this text (or markup) in an <h4> element.

Required for prompts

callback

Function

Required for confirm and prompt

An alert callback should not supply an argument; it will be ignored if it does:

bootbox.alert({ message: "I'm an alert!", callback: function() {} })

Confirm and prompt callbacks must supply an argument for the result; for confirm, it will be a true or falsevalue, while the prompt result will hold the value entered by the user:

bootbox.confirm("Are you sure?", function(result) {    // result will be true or false}); 

or

bootbox.prompt("What is your name?", function(result) {    if (result === null) {        // Prompt dismissed    } else {        // result has a value    }}); 

Default: null

onEscapeBoolean | Function

Allows the user to dismiss the dialog by hitting ESC, which will invoke this function.

Options:Undefined (null)No callback function has been provided.trueHitting the ESC dismisses the dialog.falseHitting the ESC does not dismiss the dialog.

Default: true for alert, confirm, and prompt; null for custom dialogs.

showBoolean

Whether the dialog should be shown immediately.

Default: true

backdropBoolean

Whether the dialog should be have a backdrop or not. Also determines whether clicking on the backdrop dismisses the modal.

Options:Undefined (null)The backdrop is displayed, but clicking on it has no effect.true *The backdrop is displayed, and clicking on it dismisses the dialog.falseThe backdrop is not displayed.

Default: null

* When this value is set to true, the dialog will only dismiss when onEscape is also set to true or some callback function.

closeButtonBoolean

Whether the dialog should have a close button or not.

Default: true

animateBoolean

Animate the dialog in and out (requires a browser which supports CSS animations).

Default: true

classNameString

An additional class to apply to the dialog wrapper.

Default: null

sizeString

Adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are 'large' and 'small'

Requires Bootstrap 3.1.0 or newer.

Default: null

buttons

Object

Buttons are defined as JavaScript objects. The minimum shortform requirement to define a button is:

"Your button text": function() {}

The complete definition of a button object is:

buttonName : {  label: 'Your button text',  className: "some-class",  callback: function() {  }}

Options:alertokconfirmcancel, confirmpromptcancel, 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 is a confirm with custom button text and color! Do you like it?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        // ...
    }
});

You cannot override the callbacks for the alert, confirm, and prompt dialog's buttons.