解决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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jquery实现手风琴效果
Nov 20 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JavaScript 巧学巧用
May 23 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
es6函数之尾调用优化实例分析
Apr 25 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
微信红包随机生成算法php版
2016/07/21 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Jquery遍历节点的方法小集
2014/01/22 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
JSON Web Tokens的实现原理
2017/04/02 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python之时间和日期使用小结
2019/02/14 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
小学英语教学反思
2014/01/30 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
单身证明范本
2015/06/15 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
python基于tkinter制作下班倒计时工具
2021/04/28 Python
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python