关于BootStrap中Modal（模态框）使⽤⼼得
关于BootStrap中Modal（模态框）使⽤⼼得
⼀、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({
为什么使用bootstrap?
remote:"test/test.jsp";//可以填写⼀个url，会调⽤jquery load⽅法加载数据
backdrop:"static";//指定⼀个静态背景，当⽤户点击背景处，modal界⾯不会消失
keyboard:true;//当按下esc键时，modal框消失
})
remote处可以填写jsp路径或者html路径，⽤来给modal框注⼊内容
2.3、动态打开事件：
在modal框加载同时，提供⼏个⽅法⽤来控制modal框
$("#myModal").on("dal",function{
//在模态框加载的同时做⼀些动作
});
$("#myModal").on("dal",function{
//在show⽅法后调⽤
});
$("#myModal").on("dal",function{
//在模态框完全展⽰出来做⼀些动作
});
$("#myModal").on("dal",function{
//hide⽅法后调⽤
});
$("#myModal").on("dal",function{
//监听模态框隐藏事件做⼀些动作
});
2.4、解决remote只加载⼀次问题：
我们在使⽤js动态打开modal框使⽤remote请求数据，只会加载⼀次数据，所以我们需要在每次打开modal框钱移除节点数据。
解决⽅案：
$("#myModal").on("dal",function{
$(this).removeData("bs.modal");
});
2.5、解决事件监听多次：
第⼀次打开modal框正常，第⼆次，第三次，第n次打开就有可能会出现事件监听多次的奇怪问题（尤其是多个modal窗⼝叠加，出现这种问题的⼏率更⾼，我⼤致判断有可能是组件bug），所以⽆奈之举的办法，只适合应急使⽤：就是强⾏让他只调⽤监听⼀次
int count = 0 ;
$("#myModal").on("dal",function{
if(++count == 1){
//调⽤你需要的⽅法
}
//在模态框加载的同时做⼀些动作
});
总结：modal框是个很好⽤的组件，不过官⽅⽂档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。谢谢阅读，感谢对⼀名初级程序员的⽀持，只是分享⼀下⾃⼰遇到的问题，供参考！
联系作者：
加流：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。