element-ui：el-dialog遮罩层变黑

常用的遮罩样式

/* 遮罩层 */
.mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);
}

el-dialog遮罩层使用的样式

.v-modal {position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.5;background: #000000;
}

问题可能出在opacity: 0.5; 可以使用 background-color: rgba(0, 0, 0, 0.5); 实现同样的效果

解决

将原有样式覆盖

.v-modal {background-color: rgba(0, 0, 0, 0.5);
}

参考
解决 el-dialog 封装内嵌多次调用遮罩层样式失效，直接全黑

element-ui：el-dialog遮罩层变黑相关推荐

Element UI 弹窗遮罩层变黑
遮罩层突然变黑,但是只要把控制台稍微调小一点就会马上恢复正常,点击了关闭和确认按钮也会恢复正常. 最开始我去看了一下样式,里面有一个 v-modal样式,背景图为黑色,然后设置了一个opacity: ...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog. 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在. element-ui的dialo ...
vue element-ui的嵌套dialog遮罩层
vue element-ui的嵌套dialog遮罩层打开dialog时,遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住自己做项目时需要用到嵌套dialog,但 ...
element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...
Vue ELement弹框被遮罩层挡住
分享一个小哥哥的文章,问题已解决,分析的很透彻,希望对大家有帮助 https://blog.csdn.net/mr_javascript/article/details/80888681
Element ui Dialog 对话框遮罩层挡住对话框问题
1.当遮罩层挡住对话框需要点击很多下才能使对话框高亮这里不可能让客户点击这么多下的,肯定是代码出现了问题,原来的代码: el-dialog 哪怕添加append-to-body=true 也是会出现 ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...

element-ui：el-dialog遮罩层变黑

解决

element-ui：el-dialog遮罩层变黑相关推荐

最新文章

热门文章