bootstrap模态框插件-弹出框变暗问题

最新推荐文章于 2023-09-01 14:55:31 发布
最新推荐文章于 2023-09-01 14:55:31 发布
阅读量674 收藏 1
点赞数
分类专栏： 前端 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_xiang_xiang/article/details/109443481
版权

使用bootstrap模态框插件出现弹出框和背景一起变暗的问题。
弹出框变暗

看起来就像弹出框被遮在了mask下面，考虑z-index优先级关系。可以看到遮罩层.modal-backdrop的z-index: 1040;
解决办法：设置

.modal-dialog {
    z-index: 10000!important;
}

修改完成：
弹出框正常显示

H_xiang_xiang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ModalLayer模态框插件js弹出框
06-11
ModalLayer是一款带多种形式的模态框插件，js网页弹出框代码，支持倒计时、确认对话框、弹窗iframe等。
去除BootStrap模态框背景变暗效果
wj_slh的博客
06-18 1261
BOOTSTRAP 模态框（MODAL）插件 BootStrap 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，父窗体所有操作都会屏蔽 可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 在打开模态框时 原来页面追加了一个div 解决方案 1 手动去掉遮罩层 $('.modal-backdrop').remove();//去掉遮罩层 2 修改CSS .modal-backdrop 属性 Boots
去除 bootstrap 弹出框背景变暗的效果
tfish的专栏
02-28 1213
修改bootstrap.css这个文件的 .modal-backdrop 将原来的 .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } 改为 .modal-backdrop { ...
Vue + Element项目 message提示框被dialog弹框遮挡
RayShyy的博客
03-14 2104
开发碰到的问题 小shy今天遇到一个需求，在dialog弹出前会调用获取数据的接口，如果接口返回的总数为0，则使用message做一个提示。 但是呢，message总是会被dialog弹框遮挡，如下： 小shy初步判断应该是跟层叠顺序z-index有关，百度一查，果不其然，哈哈。 解决方法如下： 将message的z-index的值比dialog的大就好了（dialog的z-index的值是两千多一点）。 this.$message({message:'这是一条消息提示',type:'warning',c
dialog弹窗层级过高挡住消息提示的问题
最新发布
evennight的博客
09-01 294
在dialog属性中增加:modal-append-to-body="false"就可以了。注意：样式需要写在公共样式的style中，写在私有的scoped中不生效。弹窗的层级一般是2700左右，给message增加层级3000就可以了。也有可能是modal-append-to-body导致的。message: “提示信息”,
el-dialog遮罩层覆盖弹框（z-index值大的图层在z-index值小的图层下面）
热门推荐
Annie的博客
11-13 1万+
一、问题 如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。 审查元素时看到，遮罩层的z-index为2042。 将遮罩层隐藏，查看弹框的z-index为2043。 二、原因 z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在...
bootstrap模态框弹出效果
06-24
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许在当前页面上以弹出窗口的形式展示内容，而无需跳转到新的页面。Bootstrap框架提供了丰富的模态框功能，包括动画效果、可定制的样式以及方便的API，...
Bootstrap 模态框实例插件案例分析
10-20
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它通过在当前页面上弹出一个浮层来提供额外的信息或功能，而不会让用户离开主页面。这种设计模式极大地提升了用户体验，因为它允许用户在不中断当前操作的...
Bootstrap模态框插件使用详解
08-30
Bootstrap 模态框插件是一款交互式网站非常常见的弹窗功能插件，主要用于在网站中弹出模态框，以便与用户进行交互。下面是 Bootstrap 模态框插件的使用方法详解： 一、基本使用 Bootstrap 模态框插件的基本使用...
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
本文将深入探讨如何扩展Bootstrap的Modal模态框，实现动态添加和弹出多个Modal框。 首先，我们需要理解Bootstrap Modal的基本结构。一个基本的Modal由三部分组成：`<div class="modal">`（模态对话框）、`.modal-...
在VUE中使用el-dialog出现z-index值很大的遮罩解决办法
qq_31493411的博客
04-21 1万+
在开发中，会遇见出现z-index值很大的遮罩，遮住el-dialog弹出框。 官网可以看到，遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。 所以在el-dialog中添加:modal-append-to-body=false，这样就ok了 显示正常 ...
去除Bootstrap模态框背景变暗效果
qq_43077362的博客
04-24 1141
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 bootstrap的模糊框效果都是如下所示的： 本人非前端工程师，在做项目的时候用到了bootstrap框架，Bootstrap的模糊框的出现会使得背景变暗，项目需要去掉模糊框的暗色背景，所以经...
bootstrap 模态框的关闭后，背景仍然是暗色的。
会写代码的心理咨询师
04-18 6988
这个问题是两种写法不同造成的 第一种 $('#avatar-modal').modal('hide'); 这种写法模态框会关闭，并背景恢复。 第二种 $('#avatar-modal').modal().hide(); 这种写法，模态框会消失，但暗色背景仍然在。不能操作。 所以建议bootstrap相关语法，用第一种即可。
Bootstrap无法弹出模态框的解决办法
weixin_34389926的博客
06-11 9194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css...
Bootstrap插件深度解析：过渡效果与模态框详解
模态框是Bootstrap中的一个重要组件，用于在父窗口上弹出一个独立的子窗口，用于临时展示或交互。要单独使用模态功能，需引入`modal.js`。模态框可以通过两种方式开启： - **数据属性**：在触发元素上设置`data-...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值