bootstrap 中 modal模态框同背景一样显示灰色

最新推荐文章于 2024-05-07 10:21:48 发布
最新推荐文章于 2024-05-07 10:21:48 发布
阅读量2.8k 收藏 1
点赞数 3
分类专栏： Bootstrap 文章标签： bootstrap modal 模态框灰色 bootstrap冲突
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36550828/article/details/92010114
版权

在这里插入图片描述刚开始以为是z-index的原因，去找了笼罩层.modal-backdrop
在这里插入图片描述
然后我去修改了弹出框的z-index发现不管用

后来百度发现原因（http://wenda.bootcss.com/question/321）
因为我把模态框放到了含有fixed-top的类里
（后来发现弹出的按钮在这个类里也不行）
可能这两个有冲突

这个本来是想给navbar固定顶部，然后放到父一级了，现在把它放到navbar里发现只有页面滚动条在顶部时，他才会显示出来，往下滚动后点击弹出按钮，它就又变灰色了，这个bug有点难受，所以我目前是这两个只能留一个，所以最后还是自己写个模态框的组件了

POWER!
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
bootstrap modal 关闭后还有灰色背景无法操作页面问题解决
JceWind的专栏
04-02 2171
真是天下文章一大炒，网上答案千篇一律。 我的删除按钮代码如下： <button class="btn btn-danger btn-sm publish_font" ><span class="pe-7s-trash" aria-hidden="true"> 删除</span></button> 我的模态框代码： <div class="mo...
JQuery弹出框，背景变灰色
01-10
在弹出框显示时，我们希望页面背景变灰色，以突出弹出框。这可以通过添加一个全屏的半透明覆盖层实现。首先，在 HTML 中添加这个覆盖层： ```html ; position:fixed; top:0; left:0; right:0; bottom:0; background...
bootstrap模态框 弹出框被灰色层遮挡住
weixin_47192362的博客
03-19 769
使用模态框，点击按钮发现被一层灰色笼罩，无法点击任何地方 其实后面发现我把弹出框的代码放进了div里面，应该将它放进body里面。 好了！
Bootstrap 5-背景颜色
最新发布
m0_73839298的博客
05-07 235
【代码】Bootstrap 5-背景颜色。
bootstrap 模态框 关闭 灰色_bootstrap模态框怎么关闭事件
weixin_39732506的博客
11-28 268
模态框避免点击背景处关闭：程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”<div class="modal fade" id="edit" tabindex="-1" role="dial...
bootstrap使用moda弹出框时 弹出框被灰色层遮挡住
ifspirt的博客
02-24 477
bootstrap使用moda弹出框时 弹出框被灰色层遮挡住
bootstrap 模态框实现拖动，移除模态框灰色背景和同个页面多次弹出模态框实现
Sunny__wei的博客
10-14 417
内容如标题,不多说 直接上实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <-- 模态框拖拽插件 --> <link rel="styleshee...
Bootstrap模态框
每一个不曾起舞的日子，都是对生命的辜负
11-15 604
Bootstrap模态框 开始演示模态框 × 模态框标题
去除Bootstrap模态框背景变暗效果
qq_43077362的博客
04-24 1125
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 本人非前端工程师，在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经...
网页课程设计&毕业设计_灰色炫酷扁平化风格bootstrap框架网站模板.zip
03-02
3. 利用JavaScript和jQuery增强交互性：Bootstrap集成了jQuery库，提供了许多插件，如模态框（Modal）、下拉菜单（Dropdown）、轮播图（Carousel）等，可以提升网站的交互体验。 4. 自定义Bootstrap：如果预设的样式...
灰色Bootstrap自适应企业网站html静态模板.zip
10-05
4. **JavaScript插件**：模板可能包含Bootstrap的内置插件，如模态框（modal）、下拉菜单（dropdown）、工具提示（tooltip）和弹出框（popover），这些增强了交互性和用户体验。 此外，HTML静态模板中的CSS文件用于...
城市公交巴士bootstrap网站模板
03-31
6. **JavaScript插件**：可能包括模态框（Modal）用于显示详细信息，如公交站详情；以及滚动动画，提升用户交互体验。 7. **脚本和字体**：模板可能包含定制的JavaScript脚本，以实现特定功能，如实时公交位置追踪...
扁平化设计Bootstrap3后台管理模板
06-06
这些模块都是基于Bootstrap3的组件构建的，如使用模态框（modal）进行弹窗操作，使用下拉菜单（dropdown）实现多级导航，使用表单控件（form controls）来收集用户输入，使用卡片（cards）展示信息等。这些预设的...
模态对话框被灰色阴影遮罩挡住的问题
Erudite_x的博客
05-13 350
原因：是因为.modal-backdrop 和 .modal-dialog 里面的 z-index 属性等级问题。 解决办法： 首先找到 .modal-backdrop 里面 z-index 的值 本人显示为： z-index: 10 其次找到 .modal-dialog 里面的 z-index 的值 本人显示为： z-index: 10 （所以报错了） 最后修改： 只需修改其中的一个值即可。 规则：.modal-dialog 中 z-index 的值要大于 .modal-backdrop 中
模态弹窗(对话框)点击灰色区域消失
追梦
12-17 3005
模态弹窗(对话框)点击灰色区域消失 代码如下 ： - (IBAction)onClick:(id)sender {    vc2 = [[View2Controller alloc]initWithNibName:@"View2Controller" bundle:nil];    vc2.modalPresentationStyle = UIModalPresent
bootstrap 模态框 关闭 灰色_Dialog 弹出框
weixin_39592137的博客
11-28 437
介绍弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。弹出框组件支持函数调用和组件调用两种方式。函数调用Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。import { Dialog } from 'vant';Dialog({ message: '提示' });组件调用通过组件调用 Dialog 时，可以通过下面的方式进行注册：import Vue from...
Element ui 的组件弹窗 el-dialog点击的时候全屏变灰问题解决
CXYCMY的博客
01-29 1119
Dialog嵌套显示变灰问题解决方案
bootstrap 禁用 modal 点击空白处关闭事件
移动互联网开发者
06-25 5681
在使用bootstrap的 modal 时候，会遇到 在弹出的modal  后，点击空白处时 modal也关闭了，怎么禁用空白关闭事件呢 一般使用： $('#modal_id').modal(); 进行关闭，那么这样就会导致点击空白处modal也关闭了，可以采用如下方法： $('#modal_id').modal({backdrop: 'static', keyb
bootstrap modal框出现蒙层,无法点击modal框内容
badou9199的博客
10-08 559
把model的z-index设置的高一点 .modal-backdrop{ z-index:0; } 转载于:https://www.cnblogs.com/Alone-Tree/p/9752572.html
bootstrap弹出多个模态框_扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框...
05-20
要实现多个弹出框，可以通过动态创建多个模态框的方式来实现。以下是一种实现方法： 1. 在 HTML 中添加一个按钮，用于触发弹出框： ```html 打开模态框 ``` 2. 在 JavaScript 中编写代码，用于动态创建模态框： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值