大家好蜡励，我是IT修真院北京分院25期的學(xué)員隆圆，一枚正直純潔善良的web前端程序員今天給大家分享一下，修真院官網(wǎng)js任務(wù)4别渔，深度思考中的知識點(diǎn)——如何使用bootbox附迷？惧互？?
1.背景介紹
我們在寫后臺有很多的地方都有用到彈出模擬框的效果，而且一般的后臺框架都是自己帶有這樣的效果的喇伯。但有一定的局限性：界面不美觀喊儡，功能實(shí)現(xiàn)較復(fù)雜。
Bootbox.js是一個(gè)小型的JavaScript庫稻据，基于 Twitter 的 Bootstrap 開發(fā)艾猜。它允許你創(chuàng)建使用編程對話框∧砻酰可以快速定制匆赃，創(chuàng)建自己所需的模態(tài)框，可以方便的更改它的樣式今缚。
2.知識剖析
該庫提供了三個(gè)旨在模仿其原生JavaScript等效項(xiàng)的函數(shù)算柳。他們確切的函數(shù)名是靈活的，因此每個(gè)可以采取各種參數(shù)來定制標(biāo)簽和指定默認(rèn)值姓言，但它們最基本是這樣：
警告
?? ? ? ? ? ? ? ? ? ? ? ?bootbox.alert(message, callback)
提示
? ? ? ? ? ? ? ? ? ? ? ? bootbox.prompt(title, callback)
確認(rèn)
? ? ? ? ? ? ? ? ? ? ? ? bootbox.confirm(message, callback)
Bootbox庫還提供了一個(gè)自定義模態(tài)框的函數(shù)瞬项，你也可以使用它來創(chuàng)建自己的自定義對話框：
? ? ? ? ? ? ? ? ? ? ? ? bootbox.dialog(options)
3.常見問題
bootbox的所有版本都是在Bootstrap和jQuery的基礎(chǔ)之上的，因此bootstrap何荚，jQuery和bootbox的版本要對應(yīng)
4.解決方案
? ? ? ? Bootbox.js
對話框代碼不阻止代碼執(zhí)行
由于這個(gè)限制囱淋，在用戶關(guān)閉對話框之前不應(yīng)該運(yùn)行的代碼應(yīng)該放置（或調(diào)用）在對話框的回調(diào)函數(shù)中。
? ? ? ? ? ? ? ? 注意腳本引用的順序
jQuery
Bootstrap
Bootbox
5.編碼實(shí)戰(zhàn)
? ? ? ? ? ? 實(shí)踐demo
6.擴(kuò)展思考
模態(tài)框和非模態(tài)框有什么區(qū)別
模態(tài)對話框：就是在其沒有被關(guān)閉之前餐塘，用戶不能與同一個(gè)應(yīng)用程序的其他窗口進(jìn)行交互妥衣，直到該對話框關(guān)閉。
非模態(tài)對話框：當(dāng)被打開時(shí)戒傻，用戶既可選擇和該對話框進(jìn)行交互税手，也可以選擇同應(yīng)用程序的其他窗口交互。
7.參考文獻(xiàn)
參考一：Bootbox.js
8.更多討論
1.問：能否嵌套使用bootbox
答：只需將寫在bootbox寫在回調(diào)函數(shù)中
2.問：我們在angular中稠鼻，如何使用bootbox
答：寫在onclick事件中即可
3.問：能不能自定義彈出框的位置
答：可以冈止，使用定位即可
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始候齿，找個(gè)師兄熙暴，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏慌盯，學(xué)習(xí)的路上不再迷弥苊梗”。
這里是技能樹.IT修真院亚皂，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線俱箱，學(xué)習(xí)透明化，成長可見化灭必，師兄1對1免費(fèi)指導(dǎo)狞谱∧四。快來與我一起學(xué)習(xí)吧?！
