解决bootstrap弹出多个modal遮罩始终在第一个modal下面问题

最新推荐文章于 2022-03-18 12:08:15 发布
最新推荐文章于 2022-03-18 12:08:15 发布
阅读量2.8k 收藏 3
点赞数 2
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luchao1989/article/details/123557119
版权

目录

1.场景描述

2.解决方案

3.代码讲解

4.完整代码

1.场景描述

html页面先后弹出3个modal，看效果modal显示正确，但是遮罩都堆在第1个modal下面了；

期望效果：modal3遮罩盖住modal2，modal2遮罩盖住modal1

2.解决方案

可以在modal显示的时候，将modal和遮罩设置合适的z-index属性，让最后打开的modal和遮罩显示在最上面。

具体方案是：重写bootstrap.js中 modal 的show方法，取当前所有显示状态的modal和遮罩, 计算所有这些元素的z-index属性最大值max, 将即将显示的遮罩z-index属性设置为max+10, 将即将显示的modal的z-index属性设置为max+20

3.代码讲解

先创建实例代码，从bootstrap官网copy的代码基本结构，增加3个modal

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开1
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
            <div class="modal-body">
                我是1
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                    打开2
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >2</h4>
            </div>
            <div class="modal-body">
                我是2
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
                    打开3
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >3</h4>
            </div>
            <div class="modal-body">
                我是3
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

运行之后3个modal都显示的效果是这样的

接下来分析bootstrap源码，版本：3.4.1;找到modal的show方法：

 看源码是通过 Modal 对象设置的，往上看源码发现 Modal 是一个构造函数似得存在：

 并且最终作为modal的构造函数：

 

分析到这里，我们就确定：重写modal构造器里的show方法

我们在示例程序最下面添加js代码，先将Modal取出来：

<script type="text/javascript">
    +function ($) {
        let Modal = $.fn.modal.Constructor; // 先将Modal取出来
    }(jQuery);
</script>

 然后将 bootstrap.js 中的 show 方法源码完整的拷贝到示例中： 

拷贝完之后找到设置 backdrop 属性的匿名函数：

 在匿名函数里面加上扩展代码：

 

// expansion part
                // 取当前所有显示状态的modal和遮罩, 计算所有这些元素的z-index属性最大值max, 将即将显示的遮罩z-index属性设置为max+10, 将即将显示的modal的z-index属性设置为max+20
                let $beShowDialog = that.$element;
                let $beShowBackDrop = that.$backdrop;
                let zIndexAry = $.map($(".modal:visible,.modal-backdrop:visible"), function(obj){return $(obj).css('z-index')});
                let max = 1030;
                if (zIndexAry && zIndexAry.length > 0) {
                    max = Math.max.apply(null, zIndexAry);
                }
                $beShowDialog.css("z-index", max + 20);
                $beShowBackDrop.css("z-index", max + 10);

看下最终效果:

 

4.完整代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开1
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
            <div class="modal-body">
                我是1
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                    打开2
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >2</h4>
            </div>
            <div class="modal-body">
                我是2
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
                    打开3
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >3</h4>
            </div>
            <div class="modal-body">
                我是3
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javascript">
    +function ($) {
        let Modal = $.fn.modal.Constructor;
        Modal.prototype.show = function (_relatedTarget) {
            // the source code copy from bootstrap.js, version = 3.4.1
            var that = this
            var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

            this.$element.trigger(e)

            if (this.isShown || e.isDefaultPrevented()) return

            this.isShown = true

            this.checkScrollbar()
            this.setScrollbar()
            this.$body.addClass('modal-open')

            this.escape()
            this.resize()

            this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

            this.$dialog.on('mousedown.dismiss.bs.modal', function () {
                that.$element.one('mouseup.dismiss.bs.modal', function (e) {
                    if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
                })
            })

            this.backdrop(function () {
                var transition = $.support.transition && that.$element.hasClass('fade')

                if (!that.$element.parent().length) {
                    that.$element.appendTo(that.$body) // don't move modals dom position
                }

                that.$element
                    .show()
                    .scrollTop(0)

                that.adjustDialog()

                if (transition) {
                    that.$element[0].offsetWidth // force reflow
                }

                that.$element.addClass('in')

                that.enforceFocus()

                var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

                transition ?
                    that.$dialog // wait for modal to slide in
                        .one('bsTransitionEnd', function () {
                            that.$element.trigger('focus').trigger(e)
                        })
                        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
                    that.$element.trigger('focus').trigger(e)
                // expansion part
                // 取当前所有显示状态的modal和遮罩, 计算所有这些元素的z-index属性最大值max, 将即将显示的遮罩z-index属性设置为max+10, 将即将显示的modal的z-index属性设置为max+20
                let $beShowDialog = that.$element;
                let $beShowBackDrop = that.$backdrop;
                let zIndexAry = $.map($(".modal:visible,.modal-backdrop:visible"), function(obj){return $(obj).css('z-index')});
                let max = 1030;
                if (zIndexAry && zIndexAry.length > 0) {
                    max = Math.max.apply(null, zIndexAry);
                }
                $beShowDialog.css("z-index", max + 20);
                $beShowBackDrop.css("z-index", max + 10);
            })
        }
    }(jQuery);
</script>
</body>
</html>

luchao1989
关注
bootstrap弹出多个模态框_Bootstrap同时弹出多个模态窗口Modal时的几个问题
weixin_31423913的博客
12-29 1437
Bootstrap中的modal组件是使用率比较高的组件之一，可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好，有些人说应该尽量避免同时弹出多个modal，应该关闭之前的modal再弹出新的modal，确实，弹出多个modal会导致页面看起来比较混乱，但不管出于什么原因，我们经常还是会碰到需要弹出多个modal的情况。首先，碰到的第一个问题就是如果弹出多个modal，会出现...
Bootstrap 模态框：打造交互式用户体验
最新发布
xyq2024的博客
12-21 320
在当今的网页设计领域，交互性是提升用户体验的关键要素之一。Bootstrap，作为最受欢迎的前端框架之一，提供了丰富的组件来帮助开发者快速实现各种交互效果。其中，模态框（Modal）是最常用的组件之一，它能够在当前页面之上显示一个对话框，用于显示信息、提示输入或进行其他交互操作。本文将详细介绍Bootstrap模态框的使用方法、功能特点以及在实际项目中的应用。
Bootstrap 多弹窗（模态窗），第二层覆盖前一层解决办法
lebron3v的专栏
11-21 5177
问题说明：最近公司遇到了一个需求，需要在bootstrap一个模态窗上再弹出一个模态窗，出现，第二个模态窗被第一个模态窗覆盖的问题，很是尴尬。 解决方案：在网上查阅了很多博客，都说是要各种修改bootstrap的源码之类的，复杂且不一定有效。下一行是重点。 解决这个问题的关键点在于你的模态窗页面代码的顺序。只要将代码顺序按照你想要的弹出窗顺序排列皆可以解决这个问题！如，第一层在前，第二层在后 ...
bootstrap中的模态框（modal，弹出层）
热门推荐
开发笔记
08-16 12万+
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
bootstrap弹出多个模态框_bootstrap中多个modal弹出的问题解决方案
weixin_39966225的博客
12-28 895
在bootstrap的官网中了解到modal弹出只是支持单个，对于嵌套的modal并没有提供相应的解决方案，本文这里就根据网上找到的案例进行整理得到。解决方案主要是通过对modal的zindex进行赋值，使最新弹出的modal总是在最前面的。$(document).ready(function () {// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面...
bootstrap模态框modal被遮罩层挡住问题处理
wzp20092009的博客
03-18 4058
先从modal的配置中移除遮罩层 <!-- 需要在外面的modal需要设置参数data-backgrop为false，这样就不会显示遮罩层了 --> <div class="modal" id="topMenu-modal" tabindex="-1" role="dialog" data-backdrop="false"> <div class="modal-dialog" role="document"> <div class="m.
bootstrap多层modal框的遮罩问题
sinat_29247277的博客
07-05 2827
在modal框上弹出modal框的时候效果如下 如大家所见，下层并没有进行遮罩，原因是最上层的modal的z-index需要比遮罩大，下层的需要比遮罩小，而modal的遮罩效果z-index为1040 .modal-backdrop {//bootstrap的遮罩属性 position: fixed; top: 0; right: 0; bottom: 0; lef...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
使用JavaScript监听modal的打开和关闭事件，当新的modal弹出时，主动将焦点设为第一个输入框。例如，使用Bootstrap的`shown.bs.modal`事件： ```javascript $('#myModal').on('shown.bs.modal', function () { ...
Bootstrap Modal遮罩弹出层(完整版)
09-01
Bootstrap Modal 的核心特点是它具有一个半透明的遮罩层和一个在屏幕中央浮动的弹出内容，提供了良好的用户体验。 在Bootstrap Modal的设计中，主要涉及到以下几个关键点： 1. **HTML 结构**： 弹出层的基础HTML...
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
08-31
Bootstrap模态框（Modal）是前端开发中常用的一个组件，它允许在页面上弹出一个交互式的对话框，常用于用户确认操作、填写表单或显示详细信息等场景。然而，在处理多层模态框（多弹窗叠加）时，可能会遇到一些问题，...
bootstrap弹出多个模态框_Bootstrap 显示多个模态框（modal）
weixin_36048838的博客
01-11 2469
概述Bootstrap只支持同时显示一个模态框(貌似是因为【data-dismiss="modal"】委托为了全局，故显示多个模态框后，点击“关闭”，【data-dismiss="modal"】会将所有的模态框关闭)。若要显示多个模态框并各自单独关闭，可使用Js(或Jquery)单独进行控制。备注：Bootstrap Modal多个弹出层顺序与html中定义顺序相关，后定义的位于上层。方法触发点(...
bootstrap模态框中再弹出一个modal模态框被遮住问题
qq_30908729的博客
04-02 1911
在bootstrap模态框中再弹出一个modal模态框被遮住了 解决方法： 我的问题是第一个弹框中再弹出第二个弹框，第二个弹框被第一个弹框覆盖在底部，如下所示： <div class="modal fade" id="2-modal" tabindex="1" role="dialog" aria-labelledby="2-modal-label" ...
bootstrap弹出多个模态框_扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框...
weixin_34731498的博客
01-26 440
js代码function initView(_box){var $p = $(_box || document);$('a[target="dialog"]', $p).each(function(event){$(this, $p).unbind('click').click(function(event){openModal(event);});});}$(function(){initVie...
Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）
Vinnie.Wu的博客
08-03 3151
在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。 一、多弹出框顺序设置 在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。 解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（
bootstrap中2个modal弹框
hanjingjun123的博客
01-16 1923
bootstrap的modal 1上弹出modal 2，modal 2上弹出一个iview的确认框； ``` &amp;lt;script&amp;gt; setModalsAndBackdropsOrder:function() { var modalZIndex = 1040; $('.modal.in').each(function(index) { ...
angular2 ngx-bootstrap modal模态框不在最上层
何欣澄的博客
06-03 4190
angular-cli bootstrap4 使用模态框时，遇到了这2个问题 模态框 不显示 模态框显示后不在最上层 模态框 不现实的问题这个是纠结最久的问题，明明和官方文档例子一样但是就是不出来 用f12 选择看到模块都在，只是没有显示出来，然后去官方文档又仔仔细细的看了一遍发现少加了一个样式 Let ngx-bootstrap know you are using BS4O
bootstrap模态框不在最上层
weixin_34106122的博客
03-15 2848
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap modal 打开多个弹窗关闭后阴影遮罩问题
红袖添香的博客
01-23 2795
boostrap 模态框阴影是显示后填加了modal-backdrop这个class造成的： &lt;div class="modal-backdrop  in"&gt;&lt;/div&gt; 1 有两种方式去除模态框阴影，第一种模态框显示后直接删除modal-backdrop： $(".modal-backdrop").remove();//删除class值为modal-backdrop的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值