• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

作者:oldlock 字体:[增加 减小] 来源:互联网 时间:2017-05-11

oldlock通过本文主要向大家介绍了bootstrap modal,bootstrap modal.js,bootstrap modal 关闭,bootstrap modal 居中,bootstrap modal api等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

上篇我提到的‘多弹窗之叠加显示不出弹窗问题'

这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩.

这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有model,但是modal自己生成的'.modal-backdrop'只关闭了一个,其余的依然存在, 导致阴影遮罩.

这里的解决办法是

1.第一种禁用modal 点击空白自动关闭的功能。

   tempModal.modal({
    backdrop:"static"
  })
</div>

也就是只能点击关闭按钮,一层一层关闭,避免发生多层关闭的问题。

2.第二种在最外层的modal关闭时,手动删除所有遮罩

 $("#tempModal").bind('hide.bs.modal',function(){
   $(".modal-backdrop").remove();
  })
</div>

这里好处是,保留了点击空白自动关闭的功能

以上所述是小编给大家介绍的Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JS表格组件神器bootstrap table使用指南详解
  • Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
  • Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
  • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
  • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
  • 详解bootstrap的modal-remote两种加载方式【强化】
  • bootstrap 模态框(modal)实现水平垂直居中显示

相关文章

  • 2017-08-31js限制Input输入框输入最小最大字符数
  • 2017-05-11通过js修改input、select默认字体颜色
  • 2017-05-11微信小程序 页面跳转及数据传递详解
  • 2017-05-11JS实现旋转木马式图片轮播效果
  • 2017-05-11利用vue.js插入dom节点的方法
  • 2017-05-11如何用js判断dom是否有存在某class的值
  • 2017-05-11Nodejs+Socket.io实现通讯实例代码
  • 2017-05-11Javascript ES6中数据类型Symbol的使用详解
  • 2017-05-11用 js 的 selection range 操作选择区域内容和图片
  • 2017-05-11win系统下nodejs环境安装配置

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详谈jQuery unbind 删除绑定事件 / 移除标签方法
    • jQuery基于ajax操作json数据简单示例
    • 超全面的JavaScript开发规范(推荐)
    • jQuery实现复选框的全选和反选
    • Javascript中click与blur事件的顺序详析
    • javascript图片预览和上传(兼容IE)
    • js数字计算 误差问题的快速解决方法
    • 详解使用fetch发送post请求时的参数处理
    • js输入框使用正则表达式校验输入内容的实例
    • xmlplus组件设计系列之路由(ViewStack)(7)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有