快捷導(dǎo)航

淺析BootStrap中Modal（模態(tài)框）使用心得

更新時(shí)間：2016年12月24日 12:01:52 作者：heshouyou

Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家分享BootStrap中Modal（模態(tài)框）使用心得，一起看看吧

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">開始演示模態(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">&times;</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打開：

2.1、靜態(tài)打開：通過(guò)data屬性打開隱藏模態(tài)框

設(shè)置按鈕button的data-toggle:"modal"（以模態(tài)框的形式打開），data-target:"#myModal"（設(shè)置為modal的id）

2.2、動(dòng)態(tài)打開：以jquery代碼為例

$("#myModal").modal({
remote:"test/test.jsp";//可以填寫一個(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處可以填寫jsp路徑或者h(yuǎn)tml路徑，用來(lái)給modal框注入內(nèi)容

2.3、動(dòng)態(tà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ài)框隱藏事件做一些動(dòng)作
});

2.4、解決remote只加載一次問(wèn)題：

我們?cè)谑褂胘s動(dòng)態(tài)打開modal框使用remote請(qǐng)求數(shù)據(jù)，只會(huì)加載一次數(shù)據(jù)，所以我們需要在每次打開modal框錢移除節(jié)點(diǎn)數(shù)據(jù)。

解決方案：

$("#myModal").on("hiden.bs.modal",function{
$(this).removeData("bs.modal");
});

2.5、解決事件監(jiān)聽多次：

第一次打開modal框正常，第二次，第三次，第n次打開就有可能會(huì)出現(xiàn)事件監(jiān)聽多次的奇怪問(wèn)題（尤其是多個(gè)modal窗口疊加，出現(xiàn)這種問(wèn)題的幾率更高，我大致判斷有可能是組件bug），所以無(wú)奈之舉的辦法，只適合應(yīng)急使用：就是強(qiáng)行讓他只調(diào)用監(jiān)聽一次

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)站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析BootStrap中Modal（模態(tài)框）使用心得

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具