前言

Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发，旨在使使用Bootstrap modals更容易！
可以自定义alert/confirm/prompt/dialog弹出框

下载与使用

bootbox的所有版本都是在Bootstrap和jQuery的基础之上的，因此bootstrap，jQuery和bootbox的版本要对应

如果您使用的是Bootstrap 4，则还必须包含Popper.js。如果您愿意，Bootstrap当前还会在预编译版本中包含bootstrap.bundle.min.js文件，该文件将Popper.js与bootstrap.js源文件结合在一起。

我这里用的Bootstrap3，下载bootbox.js 和 bootbox.locales.js两个文件
bootbox.js 下载地址https://github.com/makeusabrew/bootbox/releases/download/v5.3.2/bootbox.js
bootbox.locales.js 下载地址https://github.com/makeusabrew/bootbox/releases/download/v5.3.2/bootbox.locales.js

引入bootbox相关2个js文件

<head>
    <link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script>
    <script src="/static/bootstarp/js/bootstrap.min.js"></script>
    <!-- 引入bootbox相关 js -->
    <script src="/static/boot-box/bootbox.min.js"></script>
    <script src="/static/boot-box/bootbox.locales.min.js"></script>
</head>

脚本使用

alert 警告框

bootbox.alert("This is the default alert!")

Confirm 确认框

bootbox.confirm("This is the default confirm!", 
            function(result){
                console.log('This was logged in the callback: ' + result);
            });

prompt 提示框

bootbox.prompt("This is the default prompt!", function(result){
            console.log(result);
        });

dialog 自定义对话框

    var dialog = bootbox.dialog({
        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we do something...</p>',
        closeButton: false
    });

    // do something in the background
    dialog.modal('hide');

alert使用

message 内容可以是一段文字也可以是html代码

  // alert 基本的用法
    bootbox.alert("Your message here…");
    // alert message消息可以带HTML
    bootbox.alert("<b>Your message here…</b>")

size设置警告框大小，title设置标题，callback是点ok后回调代码

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

confirm 使用

确认对话框，callback回调通过result判断，result是布尔值

bootbox.confirm({
    size: "small",
    message: "Are you sure?",
    callback: function(result){
        /* result is a boolean; true = OK, false = Cancel*/
        if (result) {
            /* 点ok执行这里 */
            console.log("点ok后执行这里")
        }
        else {
            /* Cancel执行这里*/
        }
    }
})

设置buttons 按钮文字和颜色

bootbox.confirm({
    size: "small",
    title: "操作提示",
    message: "删除后不可恢复，确定删除？",
    buttons: {
        confirm: {
            label: '确定',
            className: 'btn-success'
        },
        cancel: {
            label: '取消',
            className: 'btn-danger'
        }
    },
    callback: function(result){
        /* result is a boolean; true = OK, false = Cancel*/
        if (result) {
            /* 点ok执行这里 */
            console.log("点ok后执行这里")
        }
        else {
            /* Cancel执行这里*/
        }
    }
})

Prompt 使用

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

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

value是输入框初始值，inputType是设置输入框类型，默认text文本类似

    bootbox.prompt({
        size: "small",
        title: "输入用户名",
        value: "yoyo",  // 初始值
        inputType: "text",  //默认text
        buttons: {
            confirm: {
                label: '确定',
                className: 'btn-success'
            },
            cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
        callback: function(result) {
                /* result is a boolean; true = OK, false = Cancel*/
                if (result) {
                    /* 点ok执行这里 */
                    console.log("点ok后执行这里")
                }
                else {
                    /* Cancel执行这里*/
                }
            }

    })

dialog 自定义

dialog 自定义对话框

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

            }
        }
    }
})

options选项参数

message：警报，确认和自定义对话框所必需

类型: String | Element
文字（或标记）显示在对话框中

title：设置标题

类型: String | Element
在对话框中添加标题并放置此文本（或标记）中的

元素。

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

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

onEscape

类型: Boolean | Function
允许用户点击来关闭对话框ESC，这将调用此功能。

show

类型: Boolean
是否应立即显示对话框。
默认: true

backdrop

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

closeButton

类型: Boolean
对话框是否应具有关闭按钮（x）或不。
默认: true

animate

类型: Boolean
对对话框进行动画处理（需要支持CSS动画的浏览器）。
默认: true

className

类型: String
应用于对话框包装的附加类。
默认: null

size

类型: String
将相关的Bootstrap模态大小类添加到对话框包装器。有效值为：small('sm’),large(lg),extra-large('xl’)
需要Bootstrap 3.1.0或更高版本。特大号需要Bootstrap 4.2.0或更高版本。

locale*

类型: String
设置每个对话框要使用的语言环境-此选项不会覆盖默认语言环境。其他对话框仍将使用默认语言环境。
语言环境设置用于转换三个标准按钮标签：OK, CONFIRM, CANCEL

buttons

类型: Object
按钮定义为JavaScript对象。
按钮对象的完整定义是：

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

swapButtonOrder*

类型: Boolean
默认: false

centerVertical*

类型: Boolean
如果为true, the ，则以模式对话框为中心的类将添加到对话框包装器中。
需要Bootstrap 4.1.0或更高版本。.
默认: false

scrollable

类型: Boolean
如果为true，则modal-dialog-scrollable 类将添加到对话框包装器中。启用此选项可使长模态的内容自动滚动。
需要Bootstrap 4.3.0或更高版本。.
默认: false

官方文档参考https://www.bootboxjs.cn/

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。