解决Vue开发中对话框被遮罩层挡住的问题


Posted in Javascript onNovember 26, 2018

在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,无论是Element-UI dialog还是bootstrap的Modal,如下图所示:

解决Vue开发中对话框被遮罩层挡住的问题

解决Vue开发中对话框被遮罩层挡住的问题

造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值,比较简单易行的办法如下:对于bootstrap Modal需要添加css语句

.modal-backdrop {  z-index: -1;}

而对于Element UI该组件已经在属性层面提供了解决办法,只要添加:modal-append-to-body="false"就可以了。

总结

以上所述是小编给大家介绍的解决Vue开发中对话框被遮罩层挡住的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
Vue中的methods、watch、computed的区别
Nov 26 #Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
You might like
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
房地产出纳岗位职责
2013/12/01 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
表扬信格式
2014/01/12 职场文书
前台文员职责范本
2014/03/07 职场文书
初中中等生评语
2014/12/29 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android