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弹出框可以实现该功能,因此学习了一下, ...
随机推荐
- FireWall、UTM、GAP、抗DDOS防火墙
1.信息安全产品分类 1)美国标准分类(NIST-SP800-36) NIST SP800系列标准 SP800是美国NIST(National Institute of Standards and T ...
- HTTP攻击与防范-PHP客户端脚本攻击
实验目的 了解客户端脚本植入攻击的方式 掌握防范攻击的方法 实验原理 了解客户端脚本植入攻击的方式 掌握防范攻击的方法 实验内容 了解客户端脚本植入攻击的方式 掌握防范攻击的方法 实验环境描述 1. ...
- Springboot基于Redisson实现Redis分布式可重入锁【案例到源码分析】
一.前言 我们在实现使用Redis实现分布式锁,最开始一般使用SET resource-name anystring NX EX max-lock-time进行加锁,使用Lua脚本保证原子性进行实现释 ...
- go 中 sort 如何排序,源码解读
sort 包源码解读 前言 如何使用 基本数据类型切片的排序 自定义 Less 排序比较器 自定义数据结构的排序 分析下源码 不稳定排序 稳定排序 查找 Interface 总结 参考 sort 包源 ...
- js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- MySQL第五讲
内容回顾 单表操作 """ 1.配置文件先统一设置成utf8 \s 2.无论你怎么改都没有生效 你的机器上不止一个mysql文件 C有一个 D有一个 3.百度搜索 sho ...
- LeetCode-013-罗马数字转整数
罗马数字转整数 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...
- tp 实现定时任务
这里我是用tp6进行测试的:适合做本地项目 博客参考:: https://www.thinkphp.cn/topic/64455.html 1:composer 安装workman插件 compos ...
- think php 路由增删改查(搜索+关键字标红+缩略图)
路由 use think\Route; //展示添加表单 Route::get('create','user/user/create'); //表单提交数据 Route::post('save','u ...
- docker学习(一) - docker简介
(一)Docker是什么? Docker 是一个开源的应用容器引擎,你可以将其理解为一个轻量级的虚拟机,开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上 ...