第一部分:
关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来
首先呢,得有个Bootstrap的页面,这里就不说了。
其次呢,得有个modal放在页面中,不管你这段代码加在页面代码的什么地方,默认是不会显示出来的
![](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
<div class="modal fade modalIndex" id="adminModal" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">机构筛选</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> </div> </div>
最后呢,就是下面的几种打开方式:
第一种打开方式:
在某个绑定的元素上添加下面两个属性【例如在button或者a标签上】
<a data-toggle="modal" data-target="#adminModal">机构</a>
只要target指向的id正确,就可以成功打开modal框。
第二种打开方式:
给某个绑定的元素添加class,【l例如在button或者a标签上】
<a class="adminA">机构</a>
然后写js为它添加点击事件:
$(".adminA").click(function(){ $('#adminModal').modal("show"); });
第二部分:
使用过程中出现的一些问题集锦
问题1:打开的Modal模态框位于页面上图层div的下面
解决方法:
为Modal指定z-index,即可解决
.modalIndex{ z-index: 999; }
然后为modal加上这个class即可。
=======================================================
问题2:
怎么关闭modal?
解决方法:
$('#adminModal').modal('hide');
=======================================================