灵活的Bootstrap样式对话框

Bootbox提供三种功能,alertconfirm,和prompt,其目的是模仿其本地JavaScript当量。这是最简单的示例:

bootbox.alert("Hello world!");

将其与没有Bootbox时必须编写的代码进行比较:

<!-- 设置模式开始隐藏和淡出淡出 -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>

                Hello world!
            </div>
            <!-- 对话框按钮 -->
            <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
        </div>
    </div>
</div>
        
<!-- 稍后,可能在你的onload事件回调中 -->
<script>
    $("#myModal").on("show", function() {    // 连接OK按钮以在显示时取消模式
        $("#myModal a.btn").on("click", function(e) {
            console.log("button pressed");   // 举个例子……
            $("#myModal").modal('hide');     // 取消对话框
        });
    });
        
    $("#myModal").on("hide", function() {    // 在对话被取消时删除事件监听器
        $("#myModal a.btn").off("click");
    });
            
    $("#myModal").on("hidden", function() {  // 完全隐藏时从DOM中删除实际元素
        $("#myModal").remove();
    });
            
    $("#myModal").modal({                    // 连接实际的模态功能并显示对话框
        "backdrop"  : "static",
        "keyboard"  : true,
        "show"      : true                     // 确保立即显示模态
    });
</script>

每个Bootbox函数都调用第四个公共函数,dialog您可以使用它来创建自己的自定义对话框。请参阅文档 以了解用法,并了解每种功能可用的选项。

准备开始了吗?

转至“ 入门”页面,您将在其中找到开始使用Bootbox所需的信息,包括我们支持的Bootstrap版本以及将Bootbox添加到项目中的选项。