bootbox.js 封装Bootstrap模态框，更简单易用

FLowUs邀请链接：https://flowus.cn/login?code=AXNU63
FlowUs邀请码：AXNU63

官网：http://bootboxjs.com/

中文官网：https://www.bootboxjs.cn/

下面就是官方文档整理了一下，供自己查询

HTML中引入

首先，引入需要的资源文件，由于Bootbox是Bootstrap的封装，所以引入使要看一下顺序

jQuery（5版本最低需要 jquery 1.9.1版本）
Popper.js（可选）
Bootstrap（当前5版本，支持Bootstrap3、Bootstrap4）
Bootbox
Bootbox Locales (可选-如果仅需要默认的英语语言环境，则省略)

用法

Alert 提示框

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

显示一段提示消息，可以包含HTML文本：

bootbox.alert("Your message here…");
bootbox.alert("Your message <b>here…</b>");

添加回调：

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

通过选项进行更详细的定制：

bootbox.alert({
    size: "small",
    title: "Your Title",
    message: "Your message here…",
    callback: function(){ /* 回调函数 */ }
});

Confirm 确认框

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

确认对话框需要提供一个回调函数

Bootstrap modals 与BOM的提示框不同，是非阻塞的（non-blocking）

提示一段信息，选择ok则回调得到true参数，关闭则得到false：

bootbox.confirm("Are you sure?", function(result){
    /* your callback code */ 
})

其他选项：

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

Prompt 输入框

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

需要Bootstrap 3.1.0或更高版本

提示对话框需要回调函数

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

提示信息，并显示一个输入框，如果取消或关闭，则回调函数得到null，否则得到输入的文本内容：

bootbox.prompt("What is your name?", function(result){
    /* your callback code */ 
})

value：设置提示的初始值。要预选多个值（使用复选框或多选类型时），请使用数组作为value选项。请注意，每个项目的类型都应与中的类型相匹配inputOptions。默认是 null

inputType：输入的类型。可选 text、password、textarea、email、select、checkbox、radio、date、time、number、range

其中，email, date, time, number, range 都需要浏览器支持才能正常工作

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

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

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

min, max*

元素的min 或 max值<input> 。仅适用于date, time, number, 和 range 类型。

对于range 和 number，最小/最大值必须是一个数值。

对于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文章中的 min 或 max

step*

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

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

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

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

maxlength

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

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

pattern

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

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

placeholder

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

可以为占位符使用的文本量没有实际限制，但是请记住，当输入具有焦点（取决于浏览器）或具有值时，占位符会消失。

使用该message选项可提供您希望始终可见或重要的帮助文本。

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

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

required*

将required选项设置true 为要求输入值。

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

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

multiple*

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

要预选多个值，请为value选项使用数组。

请注意，每个项目的类型都应与中的类型相匹配inputOptions.

仅对select类型有效。

rows*

将rows 选项设置为非零数字以rows 使用textarea 输入类型时设置属性。

如果省略， rows 则不设置该属性，并且textarea将使用浏览器的默认行数呈现。

仅对textarea 类型有效。

dialog 自定义对话框 Custom

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

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

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

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

复杂用法举例：

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(){
                              
            }
        }
    }
})

对话框选项

message

类型: String | Element

确定和自定义对话框必须的属性

文字（或标记）显示在对话框中。

title

类型: String | Element

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

callback

类型: Function

确认框和提示框需要

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

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

确认和提示回调必须为结果提供参数。为了进行确认，它将是true 或 false 值，而提示结果将保留用户输入的值：

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;
});

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() { 
    }
}

选项：

alert：ok
confirm：cancel、confirm
prompt：cancel、confirm

可以覆盖每个可用的按钮选项以使用自定义内容和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.js 或 bootbox.all.min.js 文件，其中包括所有语言环境。

在 bootbox.locales.js 或 bootbox.locales.min.js 之后添加引用 bootbox.js.

在目录中添加对目标语言环境文件的引用（例如fr.js，使用法语语言环境）src/locales

使用addLocale 函数手动添加语言环境。

在Bootbox中使用jQuery函数

从每个对话框函数返回的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.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.setDefaults({
  /**
   * @optional String
   * @default: en
   * which locale settings to use to translate the three
   * standard button labels: OK, CONFIRM, CANCEL
   */
  locale: "fr",
  
  /**
   * @optional Boolean
   * @default: true
   * whether the dialog should be shown immediately
   */
  show: true,
  
  /**
   * @optional Boolean
   * @default: true
   * whether the dialog should be have a backdrop or not
   */
  backdrop: true,
  
  /**
   * @optional Boolean
   * @default: true
   * show a close button
   */
  closeButton: true,
  
  /**
   * @optional Boolean
   * @default: true
   * animate the dialog in and out (not supported in < IE 10)
   */
  animate: true,
  
  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "my-modal"
  
});

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')

已知局限性

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

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

不支持多个开放模式

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

提示值未清理

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

内容字符串未清除

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

posted @ 2021-06-16 11:59 wbytts 阅读(1287) 评论(0) 编辑收藏举报

刷新页面返回顶部

Aloys Wang

More is Different

bootbox.js 封装Bootstrap模态框，更简单易用

HTML中引入

用法

Alert 提示框

Confirm 确认框

Prompt 输入框

dialog 自定义对话框 Custom

对话框选项

message

title

callback

onEscape

show

backdrop

closeButton

animate

className

size

locale

buttons

swapButtonOrder*

centerVertical*

scrollable

可用的语言环境

在Bootbox中使用jQuery函数

实例功能

bootbox.init(function)

全局功能

bootbox.setDefaults(object options)

bootbox.setLocale(String name)

bootbox.addLocale(String name, object values)

bootbox.removeLocale(String name)

bootbox.locales(String name)

bootbox.hideAll()

已知局限性

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

不支持多个开放模式

提示值未清理

内容字符串未清除

公告