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系列是如果你 限制版，引導你用看到下面的 部分全由是。