Bootstrap模态框遮罩问题

之前，遇到二级模态框问题，一直没解决，今天看了一下，不过我还是选择了简单的解决办法。

问题：一般模态框默认的点击遮罩，就会触发close事件，从而模态框关闭。二级模态框的时候也是如此。

但是我发现在二级模态框周围点击遮罩时，二级模态框会关闭，但是范围在扩大一点时，一级模态框和二级模态框都会消失，但是，一级遮罩和二级遮罩都还保留在页面上，导致不能进行其它操作。

一级模态框

二级模态框

后来，我认为应该是遮罩层面积的问题。

一级遮罩会覆盖整个页面，而，二级遮罩可能会小一点（覆盖不完全），也不是，透明度也变了呀（这个想不明白），所以第一种方法让整个二级模态框的层级（z-index）高于一级遮罩胎死腹中。

第二个方法，简单粗暴；就是直接点击遮罩的时候不能触发模态框关闭，（如图）只有点击右上角的“X”或者其它（特定）按钮的时候，才能触发关闭事件。

下面是二级模态框

<!-- 基于bootstrap-->

<button type="button" href="#myM_frsubg" data-toggle="modal" data-target="#myM_frsubg" οnfοcus="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">&times;</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>浙江&nbsp;杭州</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"就是阻止点击遮罩层触发模态框关闭的代码，我在一级模态框和二级模态框上都加了，即在遮罩上加个背景，就不会触发关闭，从而避免了模态框关闭，遮罩还保留的问题，也防止有时候误点，导致数据丢失问题。    基于实际情况，还是阻止点击遮罩层触发模态框关闭这样好一点。    至于第一个猜想有待进一步验证。

Bootstrap模态框遮罩问题相关推荐

html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...

Bootstrap模态框遮罩问题

Bootstrap模态框遮罩问题相关推荐

最新文章

热门文章