bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码


Posted in Javascript onOctober 17, 2017

模态框嵌套

在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框;即模态框嵌套。

模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉。

HTML代码如下:

<!--最外层包裹的模态框-->
<div class="modal fade" id="outermost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!--第一个模态框--> 

<div class="modal-dialog modalWith firstModal" id="productModal" role="document"></div> 

<!--第二个模态框--> 

<div class="modal" tabindex="-1" role="dialog" id="addproduct" aria-labelledby="myModalLabel"></div> 

<!--第三个模态框--> 

<div class="modal" tabindex="-1" role="dialog" id="selectProduct" aria-labelledby="myModalLabel"></div> 
</div>

tabindex

模态框中tabindex属性w3c的解释是:tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。几乎所有浏览器均 tabindex 属性,除了 Safari。

在模态框嵌套中,当该属性存在时不论值等于多少,键盘上的返回键(Esc)都能起作用;而不存在时返回键(Esc)不起作用。

去除模态框自带的阴影

当触发模态框时会产生一个阴影层覆盖整个页面。

bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

该 阴影层是由一个类名叫 .modal-backdrop 控制显示。

.modal-backdrop 在bootsrap源码的样式如下:

.modal-backdrop.fade {
 filter: alpha(opacity=0);
 opacity: 0;
}
.modal-backdrop.in {
 filter: alpha(opacity=50);
 opacity: .5;}

当需要去除阴影层时可以为其设置css样式

.modal-backdrop {
 filter: alpha(opacity=0)!important;
 opacity: 0!important;
}

或者通过js控制

$(".modal-backdrop").remove();

总结

以上所述是小编给大家介绍的bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript onclick事件使用方法详解
May 15 Javascript
AngularJS 控制器 controller的详解
Oct 17 #Javascript
VUE前端cookie简单操作
Oct 17 #Javascript
javascript 判断用户有没有操作页面
Oct 17 #Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
vue实现图书管理demo详解
Oct 17 #Javascript
基于Vue实现图书管理功能
Oct 17 #Javascript
You might like
基于php-fpm的配置详解
2013/06/03 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
pandas 选择某几列的方法
2018/07/03 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
学生会竞选演讲稿学习部
2014/08/25 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
植物园观后感
2015/06/11 职场文书