热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩。下面通过本文给大家分享解决方案,需要的朋友参考下吧

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

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

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

这里的解决办法是

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

   tempModal.modal({
    backdrop:"static"
  })

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

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

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

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

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


推荐阅读
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 在Python多进程编程中,`multiprocessing`模块是不可或缺的工具。本文详细探讨了该模块在多进程管理中的核心原理,并通过实际代码示例进行了深入分析。文章不仅总结了常见的多进程编程技巧,还提供了解决常见问题的实用方法,帮助读者更好地理解和应用多进程编程技术。 ... [详细]
  • 六个接私活的平台,技术在手,财富自由!值得推荐给每一位专业人士!
    本文将介绍六个适合专业人士接私活的平台,帮助技术人才实现财富自由。这些平台不仅提供了丰富的项目机会,还为用户搭建了高效的合作桥梁,是每位技术人士不容错过的资源。 ... [详细]
  • 深入解析Spring框架中的双亲委派机制突破方法
    在探讨Spring框架中突破双亲委派机制的方法之前,首先需要了解类加载器的基本概念。类加载器负责将类的全限定名转换为对应的二进制字节流。每个类在被特定的类加载器加载后,其唯一性得到保证。然而,这种机制在某些场景下可能会限制灵活性,因此Spring框架提供了一些策略来突破这一限制,以实现更加动态和灵活的类加载。这些策略不仅能够提升系统的可扩展性,还能在复杂的运行环境中确保类的正确加载和管理。 ... [详细]
  • 本文深入探讨了Bootstrap网格布局系统的高级应用,重点解析了`.col-md-4`类的基本用法及其在响应式设计中的灵活运用。通过实例分析,详细阐述了如何利用该类实现多设备适配的页面布局,为开发者提供了宝贵的实践指导。 ... [详细]
  • 无法将文件下载到AWSLambda ... [详细]
  • 适用于 SSR/WASM 的 ZXing Blazor 扫码组件,高效集成与优化
    本项目基于 ZXing 封装了适用于 SSR 和 WASM 的 Blazor 扫码组件,能够高效地集成到 Blazor 应用中,并支持通过手机或桌面电脑的摄像头进行扫码操作。该组件库不仅简化了开发流程,还提供了高性能的扫码体验。项目地址:[链接] ... [详细]
  • 数据科学笔记26:深入解析随机森林分类算法及其在Python和R中的应用
    ### 摘要随机森林是一种在集成学习领域备受推崇的算法,被誉为“集成学习技术的典范”。该方法因其简洁性、易实现性和较低的计算成本而被广泛应用。本文将深入探讨随机森林的工作原理,特别是其在Python和R中的具体应用。随机森林通过结合多个决策树和Bagging技术,有效提高了模型的准确性和鲁棒性。我们将详细解析其核心机制,并通过实际案例展示如何在不同编程环境中高效实现这一强大的分类算法。 ... [详细]
  • 在 CentOS 7 上部署和配置 RabbitMQ 消息队列系统时,首先需要安装 Erlang,因为 RabbitMQ 是基于 Erlang 语言开发的。具体步骤包括:安装必要的依赖项,下载 Erlang 源码包(可能需要一些时间,请耐心等待),解压源码包,解决可能出现的错误,验证安装是否成功,并将 Erlang 添加到环境变量中。接下来,下载 RabbitMQ 的 tar.xz 压缩包,并进行解压和安装。确保每一步都按顺序执行,以保证系统的稳定性和可靠性。 ... [详细]
  • Joomla!软件介绍【Joomla!概括介绍】国外相当知名的内容管理系统。【Joomla!基本介绍】Joomla!是一套在国外相当知名的内容管理系统(ContentManagem ... [详细]
  • 在 Debian 11 系统中部署 CMake 的详细步骤与最佳实践
    CMake是一个免费、开源、跨平台的工具系列,旨在构建、测试和打包软件. CMake用于使用简单的平台和独立于编译器的配置文件来控制软件编译过程,并生成可在您选择的编译器环境中使用 ... [详细]
  • 如何在jqGrid中调整shrinkToFit以避免水平滚动条,并解决页面存在垂直滚动条时表格超出父容器的问题
    1、下图右侧为表格超出panel部分页面html代码:jggrid-class ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了laravel中抽离公共模版共用数据相关的知识,希望对你有一定的参考价值。 ... [详细]
  • packagecom.pt.utils;importio.netty.bootstrap.Bootstrap;importio.netty.channel.ChannelFuture;imp ... [详细]
  • 请在电脑上打开以下链接进行下载w3cschool离线版(chm):http:pan.baidu.coms1bniwRCV(最新,2014年10月21日更新)w3cschool离线版(ht ... [详细]
author-avatar
huangyong黄勇_513
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有