1.背景介紹
我們在寫后臺有很多的地方都有用到彈出模擬框的效果抬探，而且一般的后臺框架都是自己帶有這樣的效果的覆获。 但有一定的局限性：界面不美觀率拒，功能實現(xiàn)較復(fù)雜倍谜。
Bootbox是一個小型的JavaScript庫迈螟，基于 Twitter 的 Bootstrap開發(fā)。它允許你創(chuàng)建使用編程對話框尔崔，可以快速定制答毫，創(chuàng)建自己所需的模擬框，可以方便隨意的更改它的樣式季春。
2.知識剖析
該庫提供了三個旨在模仿其原生JavaScript等效項的函數(shù)洗搂。他們的確切的函數(shù)名是靈活的， 因此每個可以采取各種參數(shù)來定制標簽和指定默認值载弄，它們最基本是這樣：
警告
bootbox.alert(message, callback)
提示
bootbox.prompt(message, callback)
確認
bootbox.confirm({
title: "Destroy planet?",
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) {
console.log('This was logged in the callback: ' + result);
}
});
這三個函數(shù)中的每一個都可以調(diào)用第四個公共函數(shù)耘拇，你也可以使用它來創(chuàng)建自己的自定義對話框：
bootbox.dialog(options)
3.常見問題
bootbox的所有版本都是在Bootstrap和jQuery的基礎(chǔ)之上的，因此bootstrap宇攻，jQuery和bootbox的版本要對應(yīng)惫叛。
4.解決方案
注意腳本引用的順序
jQuery
Bootstrap
Bootbox
5.編碼實戰(zhàn)
詳情請見ppt的demo
6.擴展思考
如何將bootbox和對于的按鈕綁定
$(document).on("click", ".alert", function(e) {}
7.參考文獻
參考一：Bootbox官網(wǎng)
8.更多討論
1 插件的實用價值？
在寫頁面登錄退出功能時,需要提示用戶再次確認是否真的要登陸或者退出,此時可以使用該插件快速美觀的寫出相應(yīng)的提示框,而不是干巴巴的幾個文字.
2 能不能移動這個彈出框逞刷？
bootbox本身不提供這個功能,可以使用jq寫出相應(yīng)函數(shù)來調(diào)整彈出框位置.
3 還有沒有其他的框架挣棕？
有,而且很多.比如angular自身帶的模態(tài)框,jq的popover等。
4 框套框能否實現(xiàn)亲桥？
能洛心，可以在bootbox的回調(diào)函數(shù)里面再寫一個相應(yīng)的alert，confirm等题篷。
9.鳴謝
感謝大家觀看
也感謝黃志波,張增鋒,彭勇師兄的幫助
PPT鏈接：https://ptteng.github.io/PPT/PPT/JS-08-useBootbox.html#/13
文本鏈接：http://www.jnshu.com/daily/22902?uid=8511
視頻：
