Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述
问题分析
1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级)
Element UI中设置了modal-append-to-body='true'(默认)属性
2)dialog的显示层和遮罩层都设置了position:fixed,当然显示层的z-index肯定要比遮罩层的大,才能正常的显示弹出框。
问题就出在此处,若dialog的父级也设置了position:fixed,并且其z-index比弹出框的遮罩层的小(遮罩层处于更高一层),那么弹出框的内容就会被遮罩层所遮挡住了
3)dialog的父级元素确实设置了position:fixed,并且其z-index比弹出框的遮罩层的小,所以就会出现遮罩层把内容挡住的问题
解决方案
1)针对Element UI
Element UI该组件已经在属性层面提供了解决办法
给el-dialog
设置modal-append-to-body="false"
,使遮罩层插入至 Dialog 的父元素上
2)给position:fixed
的父元素设置一个z-index
,并且要比遮盖层的大
3)dialog
父元素不使用fixed
定位
4) 添加全局CSS属性
.modal-backdrop {z-index: -1;
}
参考文章
https://blog.csdn.net/weixin_42614080/article/details/98957018
https://blog.csdn.net/java_augur/article/details/80345181
https://blog.csdn.net/lx_1024/article/details/80365689
https://blog.csdn.net/oschina_41012066/article/details/78982969
https://segmentfault.com/q/1010000010858722
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案相关推荐
- css——模态框【遮罩层的制作;信息层;往白色的块里添加表单】
目 录 1.遮罩层的制作 2.信息层 3.往白色的块里添加表单 1.遮罩层的制作 <!DOCTYPE html> <html lang="zh-CN"> ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- 【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
- Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
- element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
- bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
- bootstrap使用Modal,关闭弹框遗留遮罩层
前两天,用公司封装的框架,写了一个弹框,两个弹框操作相隔时间很短,第二个弹框出现遮罩层. // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭 ...
- element-ui框架的el-dialog弹出框被遮罩层挡住了
如图: 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果: 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释:翻译成 ...
最新文章
- vue-component
- 经常收到银行白金信用卡邀请短信,真能办下来吗?
- 前端学习(2545):找不到模块
- node之post提交上传
- 三分钟学会如何在函数计算中使用 puppeteer
- 【原】解决VS2008编译的程序在某些机器上运行提示“由于应用程序配置不正确,应用程序未能启动”的问题...
- next.js 无法导出及导出图片无法加载等问题
- 对称加密、非对称加密深度解析
- TensorFlow基础1——神经网络tutorial
- C#正则表达式通过HTML提取网页中的图片src
- 黑苹果以太网网卡已安装 无法上网
- 设计模式——终结者模式
- 响应式餐饮牛杂小吃类网站源码 dedecms织梦模板 (带手机端)
- wps空白页怎么删除,迅速帮你解决问题
- android基础之Map系列
- SWUSTOJ #67 学生成绩管理
- iPhone免越狱Git服务器搭建教程-iSH
- html 过滤引号,用js正则表达式过滤双引号的解决办法
- vue用watch监听属性变化
- Android 底部导航栏+页面切换
热门文章
- java url获取 html body,java模拟浏览器请求抓取页面,无法抓取body里的内容
- linux清理swap内容,Linux如何清理swap.buffer及cache等缓存
- 关于我喜欢计算机的作文600字,关于我喜欢的字作文600字5篇
- android r 编译找不到头文件_kOS(1):编译
- rgb sw 线主板接口在哪_十代至尊i910980XE直接上:技嘉X299X AORUS MASTER主板评测
- mysql的FIQ怎么安装_MySQL数据库设计总结
- linux内核高分辨率定时器,64位Linux上的高分辨率定时器支持
- revit2019 导出obj_revit、3dmax导出object文件软件操作说明.doc
- 六十七、二分查找算法及其四个变形问题
- 六十九、Springboot整合JDBC,连接Mysql