模态框被div class=modal-backdrop fade in覆盖的问题

最新推荐文章于 2024-06-04 16:58:41 发布
最新推荐文章于 2024-06-04 16:58:41 发布
阅读量401 收藏 7
点赞数 5
分类专栏： 前端 文章标签： django 后端 html python 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AZURE060606/article/details/136923749
版权

模态框被<div class="modal-backdrop fade in">覆盖的问题

起因：在导入模态框时页面被一层灰色的标签覆盖住

image-20240321230632421

F12查看后发现是一个<div class="modal-backdrop fade in">

image-20240321230859489

一开始以为是z-index的问题，但经过挨个修改后感觉也不是，最后发现是position这个属性搞的鬼

如果模态框的遮罩层的定位也使用了 position: fixed，可能会出现遮罩层无法覆盖整个页面内容的情况

<ul class="nav navbar-nav navbar-right righ" style="position: fixed; z-index: 100; right: 0">

将position属性删除后恢复正常

image-20240321230716841

Az_plus
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
01-21
上篇我提到的‘多弹窗之叠加显示不出弹窗问题’ 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题，也就是所有modal都关闭了，但是主页面仍然被阴影遮罩. 这个问题从哪来的，是因为modal叠加，我们点击窗口之外的空白部分，一次性关闭所有model，但是modal自己生成的’.modal-backdrop’只关闭了一个，其余的依然存在， 导致阴影遮罩. 这里的解决办法是 1.第一种禁用modal 点击空白自动关闭的功能。 tempModal.modal({ backdrop:static }) 也就是只能点击关闭按钮，一层一层关闭，避免发生多层关闭的问题。 2.第
bootstrap 模态框 去除阴影
weixin_40087279的博客
08-27 2509
boostrap 模态框阴影是显示后填加了modal-backdrop这个class造成的： &lt;div class="modal-backdrop in"&gt;&lt;/div&gt; 有两种方式去除模态框阴影，第一种模态框显示后直接删除modal-backdrop： $(".modal-backdrop").remove();//删除class值为modal-backdrop...
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
npm install --save react-modal-hook 用法 使用ModalProvider为您的应用程序提供模态上下文： import React from "react" ; import ReactDOM from "react-dom" ; import { ModalProvider } from "react-modal-hook...
ModalLayer模态框插件js弹出框
06-11
ModalLayer是一款带多种形式的模态框插件，js网页弹出框代码，支持倒计时、确认对话框、弹窗iframe等。
jquery-Modal-Plug(jQuery模态框插件)
05-18
集成于jquery的一个模态框插件，在本插件中体现出了点击显示模态框，在一个模态框里面还有一个关闭按钮，如果有需求您可以使用第一个模态框，里面有多种加载方式仅供使用！
Django 注册应用
人生苦短，何妨一试
06-02 380
创建的应用，需要在主项目的myshop.settings.py 文件下注册。
python-web应用程序-Django-From组件
最新发布
m0_57852920的博客
06-04 578
在modelForm中不需要手动写类的声明。
基于Django的博客系统之增加类别导航栏（六）
05-31 795
博客类型导航栏。
Django的PATH路径转换器
brucexia的专栏
06-03 767
在第07、08行代码定义了类方法to_url()，用于将Python数据类型转换为URL地址，并进行了格式化操作（使用数字“0”从左填充的4位整数）。其中，第09行、第10行和第11行中关于年份的类型使用了“yyyy”进行定义。在第04、05行代码定义了类方法to_python()，用于将4位整数（value）转换为Python数据类型。【代码4-3】（详见本书配套下载资源中的源代码中的urlconverter.py）在第02行代码定义了类属性regex，格式为4位整数的正则表达式。
Django 创建项目及应用
人生苦短，何妨一试
06-02 302
创建的应用，需要在主项目的myshop.settings.py 文件下注册。启动 Django项目。创建 Django项目。创建 Django应用。
Django视图层探索：GET/POST请求处理、参数传递与响应方式详解
啊猪是的读来过倒的博客
06-04 763
Django框架的视图层是连接用户与服务器逻辑的桥梁。本文将带您领略Django如何处理GET和POST请求、接收前端参数以及返回各种响应的奥秘。我们将探索查询参数路径参数请求头参数和请求体参数在请求中的作用，并详细介绍render和redirect等响应方式。此外，我们还将一窥基于类的视图（CBV）的魅力，解析其与URL的映射关系及工作原理。用途用于构建任何类型的HTTP响应，而专门用于构建JSON格式的响应。内容类型：使用时，你需要手动设置。而则默认将设置为。数据序列化。
django ORM model update常规用法
u010674101的专栏
06-04 375
Django ORM（对象关系映射）提供了一种强大而直观的方式，通过Python类和方法与数据库交互。在Django模型中更新记录是一个常见的任务，可以通过多种方式完成。
Django 里解决自定义中间件的问题
CHNMSCS
06-02 476
如果在项目文件夹下创建一个文件夹utils，里面存自己定义的中间件。在 settings.py 里。
Django 传递额外参数给视图函数
brucexia的专栏
06-04 446
这样，额外参数{'foo': 'bar'}就传递给视图函数了。其中，第13行和第14行代码定义的path()函数将会自动获取mian模块传递过来的参数{'article_id': 3}，效果等同于下面的【代码4-12】。在第05行代码中，通过path()函数包含了一个Python字典类型参数{'foo': 'bar'}，该参数将会传递给视图函数views.year_archive。本例中第13行和第14代码中定义的path()函数的效果，等价于【代码4-11】传递参数的效果。
【银角大王——Django课程——Ajax请求】
weixin_45753504的博客
06-03 942
Django中使用Ajax请求基本操作代码
python-web应用程序-Django数据库-数据库表设计
m0_57852920的博客
06-03 579
在models中创建一个类会自动对数据库进行管理，那么如何用类的声明来实现数据库表的设计呢？对于前端高度重复的部分，可以使用模版继承将不变的继承下来，变化的重写即可。后续使用Django中提供的Form和ModelForm组件更方便。也可点击-tools - run manage.py TASK。创建一个前端模版layout.html。使用模版，创建一个test.html。在需要变化的地方加上。
python-web应用程序-Django数据库
m0_57852920的博客
06-03 287
Django的ORM框架则集成了pymysql或mysqlclient或MysqlDB，在其之上写代码，将会更加简洁。注意，如果创建了一个表后还需要增加字段，需要给默认值（最好给NULL）。创建、修改、删除数据库中的表（不用你写SQL语句），但无法创建数据库。3.Django链接数据库-settings.py中修改配置。2.在命令行执行下列命令后会Django会根据类自动创建表。原始方法是写代码，使用pymysql使用数据库。操作表（写在models.py文件中）2.创建新的数据库pymysql。
<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
06-06
`<div class="modal-dialog">` 表示模态框的主体部分，包含了模态框的标题、内容和底部按钮等元素。`<div class="modal-content">` 用于包裹模态框的标题、内容和底部按钮等元素。`<div class="modal-header">` 表示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值