BootStrap同时显示多个Modal解决方案

摘要:
使用BootStrap自带的Modal的时候,如果同时调用多个Modal,那么只能看到背景颜色加深但是看不见新的Modal页面。问题主要是Modal的z-index有问题,重新计算z-index并赋值即可。在Modal完全加载之后调用方法:$.ready;著作权归作者所有

使用BootStrap自带的Modal的时候,如果同时调用多个Modal,那么只能看到背景颜色加深但是看不见新的Modal页面。

问题主要是Modal的z-index有问题,重新计算z-index并赋值即可。在Modal完全加载之后调用方法:

$(document).ready(function() {
    // 通过该方法来为每次弹出的模态框设置最新的zIndex值,从而使最新的modal显示在最前面
    $(document).on('show.bs.modal', '.modal', function() {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });
});
© 著作权归作者所有

免责声明:文章转载自《BootStrap同时显示多个Modal解决方案》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇第十七节:织梦做自定义表单在线预约的方法响应式编程系列(一):什么是响应式编程?reactor入门下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

shell脚本之数组

declare-AARRAY_NAME:声明关联数组。数组中元素的赋值方式:一次只赋值一个元素;ARRAY_NAME[INDEX]=value一次赋值全部元素;ARRAY_NAME=注意:元素与元素之间使用空格字符隔开只赋值特定元素;这种称之为稀疏格式的数组。/bin/bash#declare-aranddeclare-imax=0foriin{1..10}...

移动通信网络中的 GTP 协议

在EPSUP中使用GTP的优点之一是GTP具有固有的可识别隧道机制和GTP可以为UE提供的移动性。注意:GTPv2-U协议不存在。GTP-C协议GTP-C是GTP的控制平面,使用UDP端口2123。在EPS中,GTPv2-C协议负责创建、维护和删除S1、S5/S8和其他接口上的GTP-U隧道。它是一种基于IP的隧道协议,允许在GTP UProtocolEnt...

grep多条件查找"与","或"

这里以jps命令为例jps查看全部的jvm进程"与"查找下图是所有jvm进程如果想查找256891ThriftServer服务用"与"查找可以理解为是条件查找命令:jps|grep-eer|grep-eT"或"查找方法一:grep-E'A|B'和grep-eA-eB方法二:egrep'A|B'方法三:awk'/A|B/'...

element-ui表格el-table回显时默认全选数据

1、html代码˂el-table-columntype="selection"width="45"...

利用油猴插件实现全网VIP视频免费看

利用油猴插件实现全网VIP视频免费看第一步:首先打开谷歌应用商店搜索tampermonkey安装这个插件第二步:在百度搜索框搜索油猴可以看到以下页面,点击进入。下载谷歌上网助手解压后,将后缀为crx的文件拖入即可。之后注册一个谷歌上网助手账后登录即可进入谷歌应用商店油猴插件...

PLSQL 美化规则文件详解

开始---①createtablestudent;结束;--② 美化效果是:开始——① CREATETABLESTUDENT;结束;--②...