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: 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属性、去除阴影的示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap 模态框实现刷新网页并关闭功能

    方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.

  • bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    这是最近在做个人播客系统出现的一个问题, 场景如下 : 图中我点击删除按钮之后, 弹出一个模态框让我选择是回首页还是, 上一页, 下一页 首页没什么好说的了, 就是直接跳转, 没什么问题 上一页, 下一页却是跳转到上一篇 或者下一篇, 所有的"文章"都是用的是同一个html模板, 所以页面没有重新加载 于是就出现了 上面的问题, 模态框消失了, 但是背景却没有消失 对于这个问题, 我在网上找了好一阵子, 但是貌似并没有相关的问题 1 所以之前我本来是想将这个问题简单化, 直接"

  • bootstrap模态框实现拖拽效果

    bootstrap模态框实现拖拽效果

    本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个 拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • bootstrap模态框消失问题的解决方法

    bootstrap模态框消失问题的解决方法

    小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打

  • bootstrap 模态框（modal）实现水平垂直居中显示

    bootstrap 模态框（modal）实现水平垂直居中显示

    众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但是其本身也是存在很多bug,当应对与具体的业务逻辑的时候往往达不到细节要求,比如今天我要谈的bootstrap的模态框,其默认是显示距离顶端30px,左右居中. 怎么让其在垂直方向也居中呢? 大家可能想加一个CSS样式,让其距离顶部距离变长,实践是检验真理的唯一标准,当你去试过会发现很多问题,在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情

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

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

    模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下: <!--最外层包裹的模态框--> <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari

  • BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1"  删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • Bootstrap模态框水平垂直居中与增加拖拽功能

    Bootstrap模态框水平垂直居中与增加拖拽功能

    最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来.现在分享给大家: 原文地址:http://www.panshy.com/articles/201509/webdev-2524.html 以下为Bootstrap模态框拖拽功能的增加方法 $("#myModal&

  • Bootstrap 模态框自定义点击和关闭事件详解

    模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'

  • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma

  • Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my

  • Bootstrap模态框插入视频的实现代码

    Bootstrap模态框插入视频的实现代码

    下面代码实现别忘了前提是要在bootstrap框架下使用 一.效果 点击模态框 跳出自己已做好的MP4等格式视频 二.Bootstrap代码 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button> <div class=&quo

  • bootstrap模态框示例代码分享

    本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

随机推荐