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