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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
浅析php数据类型转换
2014/01/09 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python os模块学习笔记
2015/06/21 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python 统计字数的思路详解
2018/05/08 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python三引号如何输入
2020/07/06 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
一些.net面试题
2014/10/06 面试题
Linux文件系统类型
2012/02/15 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
初中升旗仪式演讲稿
2014/05/08 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
晚会开幕词
2015/01/28 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python