Bootstrap Javascript组件,模态框级联open解决方案
<script type="text/javascript">
top.global={zIndex:null};
$("body>div[data-manage]").on('show.bs.modal',function(e){
let relatedTarget=$(e.relatedTarget);
if(relatedTarget.attr("data-toggle")=="modal"){
let targetName=relatedTarget.attr("data-target");
if(targetName!=null){
//设置z-index值
if(top.global.zIndex==null){
top.global.zIndex = parseInt($(targetName).css("z-index"));
}
$(targetName).css("z-index",top.global.zIndex++);
console.log("count:"+$("div.modal-backdrop").length);
};
}; }); $("body>div[data-manage]").on('shown.bs.modal',function(e) {
let modal_backdrop_first=$("div.modal-backdrop:first");
modal_backdrop_first.css("display","block");
$("div.modal-backdrop").not(modal_backdrop_first).css("display","none");
}); </script>
只需要更改Jquery的selector选择器就可以使用了
Bootstrap Javascript组件,模态框级联open解决方案的更多相关文章
- JavaScript插件——模态框
Bootstrap3.0学习第十七轮(JavaScript插件——模态框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...
- Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- bootstrap课程11 模态框如何使用
bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
- 拥Bootstrap入怀——模态框(modal)篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- bootstrap 点击模态框上的提交按钮后,模态框不能关闭的解决办法
项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(del ...
- Bootstrap——可拖动模态框(Model)
还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...
随机推荐
- centos7挂载U盘,查看U盘文件
.在根目录下创建挂载的目录:mkdir mnt/usb 2.查看U盘在系统中的命称:fdisk -l 3.使用mount命令挂载U盘:mount /dev/sdb1 mnt/usb,一半就是第一个 但 ...
- 公司正在开发BI系统?这些设计要素请了解一下!
1. 数据源 第一个要素数据源.企业中的BI工具可能承接上游数据中台或者其他产品输出的结果,作为输入的数据源,每个业务方用的数据库都可能是不一样的,所以可接入数据源的种类决定的一个BI工具的可用性, ...
- 一图胜千言,想让数据产生影响力,必须拥有好上手的BI数据分析工具
当杂乱无章的数据,经过数据清洗后,得到了想用的数据,但是查看这些数据通过数据库只能看到数据本身,无法看到其中的规律,可以通过BI数据分析工具,图形化展示数据,使数据更形象化的展现在用户面前,更容易看出 ...
- 计算机网络-IP篇
目录 IP 基本认识 IP地址 IP 地址的分类 公有 IP 地址与私有 IP 地址 IP 地址与路由控制 IP 分⽚与重组 IPv6 基本认识 IPv4 ⾸部与 IPv6 ⾸部 IP协议 DNS A ...
- linux中docker容器安装vi命令详解
在使用docker容器时,同时你docker里的系统正好是debian或ubuntu的时候,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要 ...
- syntax error: unexpected end of file完美解决方案
用shell编写的一个脚本,执行的时候报错:syntax error: unexpected end of file! 发生这种报错有两种原因: 第一种: 如果你是用 windows 系统编写的脚本, ...
- 获取swiper的索引
效果: js代码: swiper.on('slideChangeTransitionEnd', function () { var txt = $('.swptest_bot_righ ...
- Pycharm:如果想验证一个文件中的函数
在该文件的函数后写上两句 def test(): pass if __name__='__main__': test() 这样就可以执行该函数 如果只是在其他文件中导入了该函数,则不会执行最后两段话, ...
- 开发并发布依赖包,作为工具包供别人npm install
1.初识包及 npm 包的概念: nodejs 中的第三方模块叫包 不同于 nodejs 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用 nodejs 中的包都是免费开源 ...
- 如何建立自己的代理IP池,减少爬虫被封的几率
如何建立自己的代理IP池,减少爬虫被封的几率 在爬虫过程中,难免会遇到各种各样的反爬虫,运气不好,还会被对方网站给封了自己的IP,就访问不了对方的网站,爬虫也就凉凉. 代理参数-proxies 首先我 ...