编程 Javascript

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

Posted in Javascript onNovember 26, 2018

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

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

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

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

总结

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

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

- Author -

java_augur

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Open and Print a Word Document

Jun 15 Javascript

比较简单的一个符合web标准的JS调用flash方法

Nov 29 Javascript

关于document.cookie的使用javascript

Apr 11 Javascript

node.js中的fs.fchmod方法使用说明

Dec 16 Javascript

JavaScript获取表单内所有元素值的方法

Apr 02 Javascript

JS排序之快速排序详解

Apr 08 Javascript

微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

Dec 09 Javascript

AngularJS实现的2048小游戏功能【附源码下载】

Jan 03 Javascript

关于vue中 $emit的用法详解

Apr 12 Javascript

解决微信小程序中的滚动穿透问题

Sep 16 Javascript

微信小程序和H5页面间相互跳转代码实例

Sep 19 Javascript

VSCode launch.json配置详细教程

Jun 18 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开发不能违背的安全规则过滤用户输入

2011/05/01 PHP

php冒泡排序、快速排序、快速查找、二维数组去重实例分享

2014/04/24 PHP

thinkphp循环结构用法实例

2014/11/24 PHP

如何使用php实现评委评分器

2015/07/31 PHP

PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)

2016/03/10 PHP

yii2 在控制器中验证请求参数的使用方法

2019/06/19 PHP

JavaScript 计算当天是本年本月的第几周

2009/03/22 Javascript

jquery ajaxSubmit 异步提交的简单实现

2014/02/28 Javascript

jquery 选取方法都有哪些

2014/05/18 Javascript

js判断一个字符串是否包含一个子串的方法

2015/01/26 Javascript

javascript实现字符串反转的方法

2015/02/05 Javascript

详解原生JavaScript实现jQuery中AJAX处理的方法

2016/05/10 Javascript

vue swipe自定义组件实现轮播效果

2019/07/03 Javascript

Vue实战教程之仿肯德基宅急送App

2019/07/19 Javascript

vue 路由懒加载中给 Webpack Chunks 命名的方法

2020/04/24 Javascript

vue 二维码长按保存和复制内容操作

2020/09/22 Javascript

在Python中使用模块的教程

2015/04/27 Python

用Python写脚本,实现完全备份和增量备份的示例

2018/04/29 Python

Python使用mongodb保存爬取豆瓣电影的数据过程解析

2019/08/14 Python

django前端页面下拉选择框默认值设置方式

2020/08/09 Python

Python实现图片指定位置加图片水印（附Pyinstaller打包exe)

2021/03/04 Python

纯CSS3代码实现switch滑动开关按钮效果

2016/08/30 HTML / CSS

极简的HTML5模版

2015/07/09 HTML / CSS

html5 拖拽及用 js 实现拖拽功能的示例代码

2020/10/23 HTML / CSS

Berghaus官网：户外服装和设备，防水服

2020/01/17 全球购物

现在输入n个数字，以逗号，分开；然后可选择升或者降序排序；按提交键就在另一页面显示按什么排序，结果为，提供reset

2012/11/09 面试题

语文教育专业推荐信范文

2013/11/25 职场文书

面料业务员岗位职责

2013/12/26 职场文书

毕业生的自我评价范文

2013/12/31 职场文书

《燕子专列》教学反思

2014/02/21 职场文书

中西医专业毕业生职业规划书

2014/02/24 职场文书

外贸采购员岗位职责

2014/03/08 职场文书

仓库管理计划书

2014/05/04 职场文书

2014年保洁员工作总结

2014/11/19 职场文书

文明单位汇报材料

2014/12/24 职场文书

Mysql 如何实现多张无关联表查询数据并分页

2021/06/05 MySQL