解决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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript测试题练习代码
Oct 10 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
详解如何使用nvm管理Node.js多版本
May 06 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
joomla数据库操作示例代码
2016/01/06 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript Split()方法
2015/12/18 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
js实现随机点名小功能
2017/08/17 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现SMTP邮件发送功能
2020/06/16 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python实现外卖信息管理系统
2018/01/11 Python
python3实现多线程聊天室
2018/12/12 Python
python性能测试工具locust的使用
2020/12/28 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
python推导式的使用方法实例
2021/02/28 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
事假请假条范文
2014/04/11 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
关于运动会的广播稿
2015/08/19 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python