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:

 

 

Name	Type	Description
message	String | Element	Text (or markup) displayed in the dialog. Required for alert, confirm, and custom dialogs
title	String | 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
onEscape	Boolean | 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. true Hitting the ESC dismisses the dialog. false Hitting the ESC does not dismiss the dialog. Default: true for alert, confirm, and prompt; null for custom dialogs.
show	Boolean	Whether the dialog should be shown immediately. Default: true
backdrop	Boolean	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. false The 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.
closeButton	Boolean	Whether the dialog should have a close button or not. Default: true
animate	Boolean	Animate the dialog in and out (requires a browser which supports CSS animations). Default: true
className	String	An additional class to apply to the dialog wrapper. Default: null
size	String	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: alert ok confirm cancel, confirm prompt 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 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.