解决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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
详解vue.js的devtools安装
May 26 Javascript
详解Angular 4 表单快速入门
Jun 05 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php进程间通讯实例分析
2016/07/11 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python的标准模块包json详解
2017/03/13 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
使用Python在Windows下获取USB PID&VID的方法
2019/07/02 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python持续监听文件变化代码实例
2020/07/22 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
道德之星事迹材料
2014/05/03 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
司考复习计划
2015/01/19 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书