bootstrap模态框嵌套、tabindex属性、去除阴影
模态框嵌套
在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框;即模态框嵌套。
模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉。
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)不起作用。
去除模态框自带的阴影
当触发模态框时会产生一个阴影层覆盖整个页面。
该 阴影层是由一个类名叫 .modal-backdrop 控制显示。
.modal-backdrop 在bootsrap源码的样式如下:
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity:;
}
.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属性、去除阴影的更多相关文章
- 去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
- bootstrap模态框和select2合用时input无法获取焦点(转)
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1&qu ...
- bootstrap模态框手动关闭遮盖层不消失
模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- BootStrap 模态框基本用法
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
随机推荐
- 【BZOJ】1692 & 1640: [Usaco2007 Dec]队列变换(后缀数组+贪心)
http://www.lydsy.com/JudgeOnline/problem.php?id=1692 http://www.lydsy.com/JudgeOnline/problem.php?id ...
- VB.NET多线程入门
近期项目中遇到了一个处理速度慢阻塞用户界面操作的问题,因此想用多线程来解决. 在处理数据的循环中,新建线程,在新建的线程中处理数据.多线程同一时候处理数据,以此来达到加速的目的,使用户界面操作变得流畅 ...
- Linux kernel parameter command line设置
现在CPU2核以上比较普遍了,平时用linux上上网可能用不着双核甚至4核,大部分发行版内核都启用了CPU_HOTPLUG,到/sys/devices/system/cpu下可以看到文件夹cpu0.c ...
- The user specified as a definer (”@’%') does not exist解决方法
报错如下: 遇见这个问题,网上都是千篇一律,改权限( grant all privileges on *.* to root@”%” identified by “.”; flush privil ...
- 我的Android进阶之旅------>MIME类型大全
今天在实现一个安装apk的代码中看到一段代码为:application/vnd.android.package-archive.不知其意.所以百度了一下,了解到这是一种MIME的类型,代表apk类型. ...
- JSP状态管理 及 Cookie实例
HTTP协议的无状态性 无状态是指,当浏览器发送请求给服务器的时候,服务器响应客户端的请求. 但是当同一个浏览器再次发送请求给了服务器的时候,服务器并不知道它就是刚才那个浏览器. 简单地说,就是服务器 ...
- js判断对象数组中是否存在某个对象
1. 如果要判断数组中是否存在某个元素的话很好判断,直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) arr.ind ...
- [Gradle] 给已存在的 task 添加依赖
需求:在编译宿主 APP 之前先编译两个插件 SamplePlugin1 和 SamplePlugin2 tasks.whenTaskAdded { task -> if (task.name ...
- maven发布项目的snapshot到nexus
1.配置发布地址信息 <repositories> <repository> <id>nexus</id> <name>Local Repo ...
- 简述泛型、用Maven创建Web项目以及在Web项目上整合SpringMVC
表设计 Timestamp列是否取消"根据当前时间戳自动更新" 是否null及默认值选择合理不合理 外键命名规范及更新和删除时的动作是否合理 泛型 类型参数 --允许在外部指定 ...