BootStrap中Modal（模態(tài)框）描述
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來(lái)創(chuàng)建模態(tài)窗口豐富用戶體驗(yàn)，或者為用戶添加實(shí)用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。
一、modal使用：
1.1、登錄bootstrap官網(wǎng)，點(diǎn)擊下載Bootstrap
1.2、導(dǎo)入對(duì)應(yīng)的樣式文件css
1.3、導(dǎo)入對(duì)應(yīng)的js，需要導(dǎo)入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jQuery，所以我們要在導(dǎo)入bootstrap.js前面導(dǎo)入jquery.min.js
對(duì)應(yīng)導(dǎo)入代碼：
<!--導(dǎo)入樣式--><link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/><link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /><link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/><link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/><!--導(dǎo)入bootstrap.js包--><script src="jquery/jquery-3.1.1.min.js"></script><script src="Bootstrap/js/bootstrap.min.js"></script>
1.4、從官網(wǎng)找到一個(gè)案例使用：
<h2>創(chuàng)建模態(tài)框（Modal）</h2><!-- 按鈕觸發(fā)模態(tài)框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開(kāi)始演示模態(tài)框</button><!-- 模態(tài)框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模態(tài)框（Modal）標(biāo)題</h4> </div> <div class="modal-body">在這里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>
二、modal打開(kāi)：
2.1、靜態(tài)打開(kāi)：通過(guò)data屬性打開(kāi)隱藏模態(tài)框
設(shè)置按鈕button的data-toggle:"modal"（以模態(tài)框的形式打開(kāi)），data-target:"#myModal"（設(shè)置為modal的id）
2.2、動(dòng)態(tài)打開(kāi)：以jquery代碼為例
$("#myModal").modal({remote:"test/test.jsp";//可以填寫(xiě)一個(gè)url，會(huì)調(diào)用jquery load方法加載數(shù)據(jù)backdrop:"static";//指定一個(gè)靜態(tài)背景，當(dāng)用戶點(diǎn)擊背景處，modal界面不會(huì)消失keyboard:true;//當(dāng)按下esc鍵時(shí)，modal框消失})remote處可以填寫(xiě)jsp路徑或者h(yuǎn)tml路徑，用來(lái)給modal框注入內(nèi)容
2.3、動(dòng)態(tài)打開(kāi)事件：
在modal框加載同時(shí)，提供幾個(gè)方法用來(lái)控制modal框
$("#myModal").on("loaded.bs.modal",function{//在模態(tài)框加載的同時(shí)做一些動(dòng)作});$("#myModal").on("show.bs.modal",function{//在show方法后調(diào)用});$("#myModal").on("shown.bs.modal",function{//在模態(tài)框完全展示出來(lái)做一些動(dòng)作});$("#myModal").on("hide.bs.modal",function{//hide方法后調(diào)用});$("#myModal").on("hiden.bs.modal",function{//監(jiān)聽(tīng)模態(tài)框隱藏事件做一些動(dòng)作});2.4、解決remote只加載一次問(wèn)題：
我們?cè)谑褂胘s動(dòng)態(tài)打開(kāi)modal框使用remote請(qǐng)求數(shù)據(jù)，只會(huì)加載一次數(shù)據(jù)，所以我們需要在每次打開(kāi)modal框錢(qián)移除節(jié)點(diǎn)數(shù)據(jù)。
解決方案：
$("#myModal").on("hiden.bs.modal",function{$(this).removeData("bs.modal");});2.5、解決事件監(jiān)聽(tīng)多次：
第一次打開(kāi)modal框正常，第二次，第三次，第n次打開(kāi)就有可能會(huì)出現(xiàn)事件監(jiān)聽(tīng)多次的奇怪問(wèn)題（尤其是多個(gè)modal窗口疊加，出現(xiàn)這種問(wèn)題的幾率更高，我大致判斷有可能是組件bug），所以無(wú)奈之舉的辦法，只適合應(yīng)急使用：就是強(qiáng)行讓他只調(diào)用監(jiān)聽(tīng)一次
int count = 0 ;$("#myModal").on("loaded.bs.modal",function{if(++count == 1){//調(diào)用你需要的方法}//在模態(tài)框加載的同時(shí)做一些動(dòng)作});總結(jié)：modal框是個(gè)很好用的組件，不過(guò)官方文檔提醒最好不要多個(gè)modal疊加很容易出現(xiàn)很難解決的前端組件問(wèn)題。
以上所述是小編給大家介紹的淺析BootStrap中Modal（模態(tài)框）使用心得，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
