当前正在查看版本5.3.2的文档。

*表示在5.0中添加的选项。

重要:

使用Bootbox对话框代替本地对话框有一些注意事项。请参阅“ 已知限制”部分以了解更多信息。

一个带有单个按钮的简单警报对话框。按下ESC键或单击关闭按钮关闭对话框。

基本用法

这是Bootbox的最简单用法,只需要您希望显示的消息文本即可。

bootbox.alert("Your message here…")
例子 bb.1
Your message here…

您的消息还可以包含HTML。

bootbox.alert("Your message <b>here…</b>")
例子 bb.2
Your message here…

高级用法

如果您有在用户关闭警报之前不应该评估的代码(请参见下面的Bootbox限制 ),请在回调函数中调用它:

bootbox.alert("Your message here…", function(){
    /* your callback code */ 
})

可以使用以下描述的选项来自定义警报。这是使用的小警报的示例size:

bootbox.alert({
    size: "small",
    title: "Your Title",
    message: "Your message here…",
    callback: function(){ /* your callback code */ }
})
例子 bb.3
Your Title
Your message here…

需要Bootstrap 3.1.0或更高版本。.

带有取消和确认按钮的确认对话框。按下ESC键或单击Close()关闭对话框并调用回调,就像用户单击了“取消”按钮一样。

确认对话框需要回调函数。

基本用法

使用confirm()对话框的最简单方法需要您希望显示的消息文本以及用于处理用户选择的回调。根据用户按下的按钮,将向回调函数传递true 或false值。

bootbox.confirm("Are you sure?", function(result){
    /* your callback code */ 
})
例子 bb.4
Are you sure?
请注意:

与本机警报,确认或提示不同,所有 Bootstrap modals都是non-blocking。记住这一点,使用时 confirm()对话框,因为它不是一个下拉更换为本地确认对话框。必须将取决于用户选择的任何代码放在回调函数中。

高级用法

可以使用以下描述的选项来自定义确认对话框。这是使用的小确认示例size:

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

需要Bootstrap 3.1.0或更高版本。.

提示用户输入的对话框。按下ESC键或单击Close()关闭对话框并调用回调,就像用户单击了“取消”按钮一样。

提示对话框需要回调函数。

基本用法

prompt()对话框 的最简单用法需要您希望显示的消息文本和用于处理用户输入的回调。如果用户取消或关闭对话框,则输入的值将为null;否则,输入的值将为null。否则,将传递文本输入的值。

bootbox.prompt("What is your name?", function(result){
    /* your callback code */ 
})
例子 bb.6
What is your name?
请注意:

与本机警报,确认或提示不同,所有 Bootstrap modals都是 non-blocking。使用 prompt()对话框时请记住这一点,因为它不是本机提示对话框的直接替代。任何依赖用户输入的代码都必须放在回调函数中。

高级用法

也可以使用下面描述的选项来自定义提示对话框。这是使用的小提示示例size:

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 */ 
    }
});
例子 bb.7
What is your name?

需要Bootstrap 3.1.0或更高版本。.

请注意:

提示需要该title选项(使用options对象时)。您可以使用该message选项,但是提示结果将不包含消息中的任何表单值。

提示对话框选项

提示对话框是(默认情况下)单行文本输入。您可以使用下面的仅提示选项来修改Bootbox生成的提示类型。

value

类型: String | Number | Array

您可以使用value 选项设置提示的初始值。

要预选多个值(使用复选框或多选类型时),请使用数组作为value选项。请注意,每个项目的类型都应与中的类型相匹配inputOptions.

默认: null

inputType

类型: String

更改为提示对话框生成的输入的类型。

要预选多个值(使用复选框或多选类型时),请使用数组作为value选项。请注意,每个项目的类型都应与中的类型相匹配inputOptions.

有效值及其类选择器:

名称
text (默认)bootbox-input-text
passwordbootbox-input-password
textareabootbox-input-textarea
emailbootbox-input-email
selectbootbox-input-select
checkboxbootbox-input-checkbox
radio*bootbox-input-radio
datebootbox-input-date
timebootbox-input-time
numberbootbox-input-number
range*bootbox-input-range

此外,复选框和单选按钮分别包装在父元素bootbox-checkbox-list和中bootbox-radiobutton-list.

email, date, time, number, 并且 range 都需要浏览器支持才能正常工作。您可能要查询caniuse.com以确定您的目标浏览器是否支持您打算使用的输入类型。

日期输入类型和浏览器支持

在撰写本文时,每个支持date输入类型的主流浏览器都只会接受ISO 8601格式的日期值,(对于完整日期)为YYYY-MM-DD,其中

YYYY = 四位数年份
MM   = 两位数的月份(01 =一月,依此类推)
DD   = 两位数字的月份(01到31)

参见 https://en.wikipedia.org/wiki/ISO_8601

范围输入和默认值

请注意,使用range输入类型时,默认的min(最小值)0默认的max(最大值)100 (请参见MDN)。如果尝试将默认值设置为最小值或最大值之外的值,则输入将默认为相应的值。

默认: text

inputOptions

类型: Array

如果指定select, checkbox, 或 radio作为输入类型,则还必须提供以下格式的有效值数组:

{
    text: '',
    value: '',
    group: ''
}

group 是用于填充<select>; 的可选属性;如果指定,<optgroup>将为inputOptions数组中找到的每个组值生成元素。

默认: null

min, max*

类型: String | Number | Date String | Time string

元素的minmax<input> 。仅适用于date, time, number, 和 range 类型。

对于rangenumber,最小/最大值必须是一个数值。

对于time, min/max 必须为有效的部分时间值,形式为HH:MM:SS,其中

HH = 之间的任何填零值00和23
MM = 之间的任何填零值00和59
SS = 之间的任何填零值00和59

对于date, min/max ,最大/最小值必须为形式的日期值YYYY-MM-DD,其中

YYYY = 四位数年份
MM   = 两位数的月份(01 =一月,依此类推)
DD   = 两位数字的月份(01到31)

有关更多信息,请参见MDN文章中的 minmax

step*

类型: String | Number

元素 的step<input> 。只有有效的 time, number, 和 range类型。

可以是字符串值any(浏览器默认值),也可以是非零的正数值。有关 更多信息,请参见MDN文章

警告: 对于大多数浏览器,日期输入在实现时存在错误step,因此该属性可能无效。因此,我们不为日期输入设置step属性。

有关 更多信息,请参见MDN文章

maxlength

类型: Number

设置maxlength选项以限制输入到基于文本的输入中的字符数。必须为正的非零数值。

有效期为 text, textarea, email, 和 password

pattern

类型: String

设置 pattern选项以要求输入值遵循特定格式。如果pattern设置为,并且用户输入了一个值,则如果输入值未通过模式验证,则提示不会关闭。

可以添加任何输入的类型,但一般只用于text输入,通常作为回退email, time, date, numberrange输入,用于这些类型的本地浏览器支持缺乏其中。

placeholder

类型: String

设置 placeholder选项以在基于文本的输入中提供少量的“帮助”文本。

可以为占位符使用的文本量没有实际限制,但是请记住,当输入具有焦点(取决于浏览器)或具有值时,占位符会消失。使用该message选项可提供您希望始终可见或重要的帮助文本。

有效期为text, textarea, email, 和 password.

如果指定time, date, number, 或 range 输入您的用户通常只看到那些类型的原生浏览器支持缺乏其中占位符。

required*

类型: Boolean

required选项设置true 为要求输入值。设为时true,如果输入值为null空字符串或未通过输入类型的内置验证约束,则提示将不会关闭。

有效期为text, textarea, email, password, select, time, date, number, 和 range 类型。

multiple*

类型: Boolean

将该multiple选项设置true为允许用户在使用select输入类型时选择多个选项。

要预选多个值,请为value选项使用数组。请注意,每个项目的类型都应与中的类型相匹配inputOptions.

仅对select类型有效。

rows*

类型: Number

rows 选项设置为非零数字以rows 使用textarea 输入类型时设置属性。如果省略, rows 则不设置该属性,并且textarea将使用浏览器的默认行数呈现。

仅对textarea 类型有效。

请参阅“ 示例”页面以获取提示对话框的更多示例。

一个完全可自定义的对话框方法,只需一个参数-选项对象。

ESC key is pressed; 按下该键时,自定义对话框不会自动关闭。您必须使用onEscape 选项自己实现此行为。

基本用法

创建自定义对话框所需的最低要求是该message选项,它将创建一个不可关闭的对话框(用作“loading”叠加层)。

bootbox.dialog({ 
    message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>', 
    closeButton: false 
})
例子 bb.8
Loading...

高级用法

如上所述,自定义对话框的唯一必需选项是message.。另外, 自定义对话框不使用全局回调。 您添加的每个按钮都应具有自己的回调函数。这是使用许多选项的示例:

bootbox.dialog({ 
    title: 'Custom Dialog Example',
    message: '<p>This dialog demonstrates many of the options available when using the Bootbox library</p>',
    size: 'large',
    onEscape: true,
    backdrop: true,


    buttons: {
        fee: {
            label: 'Fee',
            className: 'btn-primary',
            callback: function(){
                                
            }
        },
        fi: {
            label: 'Fi',
            className: 'btn-info',
            callback: function(){
                                
            }
        },
        fo: {
            label: 'Fo',
            className: 'btn-success',
            callback: function(){
                                
            }
        },
        fum: {
            label: 'Fum',
            className: 'btn-danger',
            callback: function(){
                                
            }
        }
    }
})
例子 bb.9
自定义对话框示例

该对话框演示了使用Bootbox库时可用的许多选项

有关自定义对话框的更多示例, 请参见“ 示例”页面。

可以使用以下选项配置Bootbox对话框。

message

类型: String | Element

警报,确认和自定义对话框所必需

文字(或标记) )显示在对话框中。

title

类型: String | Element

需要提示

在对话框中添加标题并放置此文本(或标记))中的<h5> 元素。

callback

类型: Function

确认和提示所需, 不要求自定义对话框

警报回调不应提供参数。如果这样做,它将被忽略:

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

确认和提示回调必须为结果提供参数。为了进行确认,它将是truefalse 值,而提示结果将保留用户输入的值:

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

要么

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

对于任何回调,如果您不希望在回调完成时关闭对话框,请添加return false;为回调的最后一行。然后,您需要使用 modal()或功能手动关闭对话框 bootbox.hideAll():

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

    return false;
}); 

默认: null

onEscape

类型: Boolean | Function

允许用户点击来关闭对话框ESC,这将调用此功能。

选项:
Undefined (null)没有提供回调函数。
true击中ESC 关闭该对话框。
false击中 ESC 并不会关闭对话框。

默认值: true用于警报,确认和提示;null用于自定义对话框。

show

类型: Boolean

是否应立即显示对话框。

默认: true

backdrop

类型: Boolean

对话框是否应该有背景。还确定在背景上单击是否消除模态。

选项:
Undefined (null)显示背景幕,但单击它无效。
true * 显示背景,然后单击以关闭对话框。
false不显示背景。

默认: null

* 当此值设置true为时,仅当onEscape还将设置为true或某些回调函数时,对话框才会关闭。

closeButton

类型: Boolean

对话框是否应具有关闭按钮() 或不。

默认: true

animate

类型: Boolean

对对话框进行动画处理(需要支持CSS动画的浏览器)。

默认: true

className

类型: String

应用于对话框包装的附加类。

默认: null

size

类型: String

将相关的Bootstrap模态大小类添加到对话框包装器。有效值为:

Small'small', 'sm'
Large'large', 'lg'
Extra large'extra-large', 'xl'

需要Bootstrap 3.1.0或更高版本。特大号需要Bootstrap 4.2.0或更高版本。

默认: null

locale*

类型: String

设置每个对话框要使用的语言环境-此选项不会覆盖默认语言环境。其他对话框仍将使用默认语言环境。

语言环境设置用于转换三个标准按钮标签: OK, CONFIRM, CANCEL

请参阅下面有关语言环境的注释。

buttons

类型: Object

按钮定义为JavaScript对象。定义按钮的最小简短要求是:

"Your button text": function() { }

按钮对象的完整定义是:

buttonName : {
    label: 'Your button text',

    className: 'some-class',
    callback: function() { 
    }
}
选项:
alertok
confirmcancel, confirm
promptcancel, confirm

可以覆盖每个可用的按钮选项以使用自定义内容(文本或HTML)和CSS样式。例如:

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) {
        // ...
    }
});

您不能覆盖警报,确认和提示对话框按钮的回调。

swapButtonOrder*

类型: Boolean

类型

默认: false

centerVertical*

类型: Boolean

如果为true, the ,则以模式对话框为中心的 类将添加到对话框包装器中。

需要Bootstrap 4.1.0或更高版本。.

默认: false

scrollable

类型: Boolean

如果为true,则modal-dialog-scrollable 类将添加到对话框包装器中。启用此选项可使长模态的内容自动滚动。

需要Bootstrap 4.3.0或更高版本。.

默认: false

语言环境用于为每个内置命令按钮(确定,取消和确认)提供翻译。

可以使用以下语言环境(请参见下表)。您可以在“示例”页面上找到每个呈现的语言环境 。

名称名称
ar阿拉伯az 阿塞拜疆
bg_BG保加利亚语br葡萄牙语-巴西
cs捷克文da丹麦文
de德语el希腊语
en英语es西班牙语/西班牙文
et爱沙尼亚语eu巴斯克
fa波斯语/波斯语fi芬兰
fr法语/法语he希伯来语
hr克罗地亚语hu匈牙利
id印度尼西亚it义大利文
ja日本ka格鲁吉亚人
ko韩语lt立陶宛语
lv拉脱维亚语nl荷兰人
no挪威pl抛光
pt葡萄牙语ru俄语
sk斯洛伐克文sl斯洛文尼亚文
sq阿尔巴尼亚语sv瑞典
sw斯瓦希里语ta泰米尔语
th泰国tr土耳其
uk乌克兰zh_CN中文(中华人民共和国)
zh_TW中文(中国台湾)
请注意:

要使用en以外的任何语言环境,您必须执行以下操作之一:

  • 使用bootbox.all.jsbootbox.all.min.js 文件,其中包括所有语言环境。
  • bootbox.locales.jsbootbox.locales.min.js 之后添加引用 bootbox.js.
  • 在目录中添加对目标语言环境文件的引用(例如fr.js,使用法语语言环境)src/locales
  • 使用addLocale 函数手动添加语言环境。

从每个对话框函数返回的Bootbox对象是一个jQuery对象。这样,您可以将大多数jQuery函数链接到Bootbox对话框的结果上。这是一个展示如何shown.bs.modal使用.on()处理Bootstrap 事件的示例:

var dialog = bootbox.dialog({
    /* Your options... */
});
                
dialog.on('shown.bs.modal', function(e){
    // Do something with the dialog just after it has been shown to the user...
});

如果将show 选项设置为false,则还可以使用Bootstrap的 modal() 函数手动显示和隐藏对话框:

var dialog = bootbox.dialog({
    show: false,
    /* Your options... */
});
                
dialog.modal('show');
                
dialog.modal('hide');

可以在Bootbox对象的实例上调用以下函数。

bootbox.init(function)

允许用户提供对话框初始化时要调用的功能。

var dialog = bootbox.dialog({
    /* Your options... */
});
                
dialog.init(function(){
    // Do something with the dialog...
});

init可以在任何包装函数上调用,因为它们都返回一个Bootbox / jQuery对象。

可以静态调用以下功能。

bootbox.setDefaults(object options)

此方法允许用户设置对话框示例中显示的许多默认选项。这些选项中的许多选项也适用于基本包装器方法,并且只要使用单个options参数调用包装器方法就可以覆盖这些选项:

bootbox.setLocale(String name)

允许用户选择语言环境而不是使用setDefaults("locale", ...).

语言环境设置用于转换三个标准按钮标签:OK, CONFIRM, CANCEL

默认: en

bootbox.addLocale(String name, object values)

允许用户为每个内置命令按钮添加自定义翻译。该 values 对象应该是这种格式:

{
    OK : '',
    CANCEL : '',
    CONFIRM : ''
}

bootbox.removeLocale(String name)

允许用户从可用的语言环境设置中删除语言环境。

bootbox.locales(String name)

允许用户从可用的语言环境设置中获取语言环境对象。如果name为空,将返回所有语言环境。

bootbox.hideAll()

隐藏所有当前活动的Bootbox对话框。可以按照常规的Bootstrap对话框关闭各个对话框:

dialog.modal('hide')

如下所述,使用Bootbox有一些警告。

对话代码不会阻止代码执行

与本机警报,确认或提示不同,所有 Bootstrap模式(以及Bootbox模式)都是 异步的;意思是,Bootstrap生成的事件是非阻塞事件。 由于此限制,必须在对话框的回调函数中调用在用户关闭对话框之前不应评估的代码。

不支持多个开放模式

如官方的Bootstrap文档中所述,这是Bootstrap模态插件的限制 。虽然它是功能上可以触发多个模态,自定义的CSS和/或JavaScript代码需要用于模态的每一层,以正确显示。

提示值未清理

Bootbox提示符返回的值不会以任何方式清除。

内容字符串未清除

您几乎可以将纯文本或HTML用于任何设置了呈现模式的显示外观的Bootbox选项,例如标题,消息和按钮标签。Bootbox 不会清除所有这些值。由于我们使用jQuery的.html()函数来构建对话框,因此这是可能的XSS向量。清理内容是您的责任。