Bootboxjs快速制作Bootstrap的弹出框效果

Bootboxjs是一个简单的js库，简单快捷帮你制作一个Bootstrap的弹出框效果。

一、简介

bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。

相比之下，你就得写不bootbox代码：

<!-- set up the modal to start hidden and fade in and out -->
<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>
<!-- dialog buttons -->
<div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
</div>
</div>
</div>
 
<!-- sometime later, probably inside your on load event callback -->
<script>
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
console.log("button pressed"); // just as an example...
$("#myModal").modal('hide'); // dismiss the dialog
});
});
 
$("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click");
});
$("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop" : "static",
"keyboard" : true,
"show" : true // ensure the modal is shown immediately
});
</script>

 

二、核心方法

bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。他们确切的方法签名是灵活的每个可以采取各种参数定制标签和指定缺省值，但它们通常被称为一样：

• bootbox.alert(message, callback)
• bootbox.prompt(message, callback)
• bootbox.confirm(message, callback)

唯一需要的参数是alert是 message; callback是必需的 confirm 和 prompt 调用以确定用户的响应。甚至当调用警报回调是确定当用户 驳回对话框由于我们的包装方法不能不要块 像他们的母语是有用的：他们是异步而非同步。

这三种方法调用四分之一个公共方法，你也可以使用你自己的自定义对话框创建 ：

bootbox.dialog(options)

更多api帮助文档请参见：http://bootboxjs.com/documentation.html

三、基本示例

请注意：“例子”对象用下面的例子 只显示一个通知，帮助说明每个回调被调用时。这是不 做bootbox本身，但你可能查看其源如果你在它是如何工作的 感兴趣。

Alert

bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
});

 

Confirm

bootbox.confirm("Are you sure?", function(result) {
Example.show("Confirm result: "+result);
});

 

Prompt

bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});

Custom Dialog

bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});

More examples »

四、下载版本4.3.0

最新的稳定版本是bootbox4.3.0。你可以下载压缩版本的bootbox.min.js在生产中使用 ，或未压缩的bootbox.js用于开发。我不会推荐外 或者文件作为GitHub不为正确的MIME类型，这可能会导致安全警告是基于浏览器的设置触发。

如果你希望你可以看到一个完整的列表的版本或下载整个库的最新版本（包括建立文件和测试） 邮编或包格式。 现实的唯一的原因，你应该使用以外的4，x.x系列是如果你 限制版，引导你用看到下面的 部分全由是。