大家好，我是IT修真院北京分院第23期的學(xué)員郭婷婷，一枚正直純潔善良的WEB前端程序員。
今天給大家分享一下流昏，如何使用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(message, 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）哪些對話框必須寫message項(xiàng)种柑？
alert和confirm必須填寫message項(xiàng)，而prompt可選填昂芜。
（2）哪些對話框必須寫title項(xiàng)莹规？
prompt必須填寫。
（3）為什么有的對話框要求寫callback函數(shù)泌神？
confirm和prompt必須填寫callback函數(shù)良漱，因?yàn)椴煌倪x擇或者填寫的值會通過callback函數(shù)返回一個(gè)值，通過不同的值可以
鳴謝
感謝大家觀看
湯特|黃源志|郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-04-bootbox.html#/
視頻鏈接: https://v.qq.com/x/page/d0504u71hq9.html
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師欢际，現(xiàn)在開始母市，找個(gè)師兄，帶你入門损趋，掌控自己學(xué)習(xí)的節(jié)奏患久，學(xué)習(xí)的路上不再迷茫”浑槽。
這里是技能樹.IT修真院蒋失，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化桐玻，成長可見化篙挽，師兄1對1免費(fèi)指導(dǎo)∧餮ィ快來與我一起學(xué)習(xí)吧?铣卡！
