Bootstrap模态框遮罩问题
来源:互联网 发布:mac git客户端 编辑:程序博客网 时间:2024/06/06 17:55
之前,遇到二级模态框问题,一直没解决,今天看了一下,不过我还是选择了简单的解决办法。
问题:一般模态框默认的点击遮罩,就会触发close事件,从而模态框关闭。二级模态框的时候也是如此。
但是我发现在二级模态框周围点击遮罩时,二级模态框会关闭,但是范围在扩大一点时,一级模态框和二级模态框都会消失,但是,一级遮罩和二级遮罩都还保留在页面上,导致不能进行其它操作。
一级模态框
二级模态框
后来,我认为应该是遮罩层面积的问题。
一级遮罩会覆盖整个页面,而,二级遮罩可能会小一点(覆盖不完全),也不是,透明度也变了呀(这个想不明白),所以第一种方法让整个二级模态框的层级(z-index)高于一级遮罩胎死腹中。
第二个方法,简单粗暴;就是直接点击遮罩的时候不能触发模态框关闭,(如图)只有点击右上角的“X”或者其它(特定)按钮的时候,才能触发关闭事件。
下面是二级模态框
<!-- 基于bootstrap-->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<button type="button" href="#myM_frsubg" data-toggle="modal" data-target="#myM_frsubg" onfocus="this.blur()">加为好友</button>
<!-- 模态框(Modal)加好友 --><div class="modal fade" id="myM_frsubg" tabindex="-1" role="dialog" aria-labelledby="myModalLabelfs" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog" style="width: 80%;"> <div class="modal-content"> <div class="modal-body myM_frsubg_dbody"> <div><button type="button" id="myM_frsubg_close" class="close" aria-hidden="true">×</button></div> <div class="myM_frsubg_dbody_s row"> <div class="myM_frsubg_dbody_sdivf col-lg-4 col-md-4 col-sm-4 col-xs-12"> <img src="../assets/images/plaza/cycle.jpg" class="media_se_fri_imgfrs"/> <div style="margin: 5px"><a href="#">萌萌哒</a><span class="hx_degree">lv3</span></div> <div style="margin: 5px"><span>123456hx</span></div> <div><label>性别:</label><span>*</span></div> <div><label>年龄:</label><span>21</span></div> <div><label>所在地:</label><span>浙江 杭州</span></div> </div> <div class="myM_frsubg_dbody_sse col-lg-7 col-md-7 col-sm-7 col-xs-12"> <div class="myM_frsubg_dbody_sse_beiz"><label>备注:</label> <span><input type="text"/></span> </div> <div class="myM_frsubg_dbody_sse_fenz"><label>分组:</label> <span> <select> <option>社团好友</option> <option>我的好友</option> <option>我的大学</option> <option>君子之交</option> </select> </span> </div> <div><input type="checkbox"/><span>不允许此人查看我的说说</span></div> </div> </div> <div class="myM_frsubg_dbody_sbtn"><button>确定</button></div> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div><!-- 模态框(Modal)完 -->
data-backdrop="static"就是阻止点击遮罩层触发模态框关闭的代码,我在一级模态框和二级模态框上都加了,
即在遮罩上加个背景,就不会触发关闭,从而避免了模态框关闭,遮罩还保留的问题,也防止有时候误点,导致数据丢失问题。
基于实际情况,还是阻止点击遮罩层触发模态框关闭这样好一点。
至于第一个猜想有待进一步验证。
0 0
- Bootstrap模态框遮罩问题
- Bootstrap模态框使用问题
- bootstrap兼容IE8问题
- Bootstrap清除浮动问题
- bootstrap的模态框问题
- bootstrap中的glyphicon问题
- bootstrap模态框传值问题
- bootstrap-table分页问题
- bootstrap-table编号问题
- ionic -bootstrap 问题
- bootstrap的一些属性问题
- bootstrap的timepicker控件问题
- bootstrap模态框点击关闭问题
- Js+Jquery+bootstrap问题小结
- BootStrap-table 复选框 问题
- bootstrap-table 分页的问题
- bootstrap中的table相关问题
- 问题总结(ng+bootstrap+css)
- wamp 点击“Your Projects”下面项目名,显示错误
- Unity热更新专题(三)Unity热更新之LuaInterface(上)
- 移动APP测试要点之性能、兼容、接口、交叉测试
- Nginx反向代理与负载均衡:节点服务器单/多虚拟机配置+实验环境搭建+原理解析
- java正则匹配中文姓名
- Bootstrap模态框遮罩问题
- 练习1
- 进程、线程相关的概念
- 蓝桥杯- 算法训练 Anagrams问题
- 我所理解的RxJava——上手其实很简单
- 大数据学习笔记之四十六 深度学习训练加速方法
- Android SDK “Connection to https://dl-ssl.google.com refused”
- Unity热更新专题(四)Unity热更新之LuaInterface(下)
- iOS代码规范(OC和Swift)