当前位置:网站首页>问题3 — messageBox弹框,修改默认背景色
问题3 — messageBox弹框,修改默认背景色
2022-06-24 06:57:00 【酒鼎】
项目场景:
PC端开发,vue + elementUI,
源码部分
MessageBox.confirm(`${
message ? message : '是否继续?'}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
})
问题描述
显示MessageBox 弹框,某种情况下,弹框背景色(遮罩层)是全黑色的。

原因分析:
可能是除了elementUI样式源码设置的背景颜色, 项目中某个地方也设置了弹框的背景色,2者重叠导致的。
解决方案:
- 找到弹框标签的class名字。具体步骤(以火狐浏览器为例):在页面上显示弹框,打开F12(控制台),选中弹框标签,复制选中元素的class名字(
el-message-box__wrapper); - 在公共组件、样式(建议放在公共文件内)文件中重新定义背景色,rgba值可以根据业务需求修改。
注意:必须附加在没有scoped的style标签中。
.el-message-box__wrapper{
background-color: rgba(0, 0, 0, 0.4);
}
- 如果需要定义背景色,又不能影响本页面其他样式,可以这样:
/* 页面其他样式 */
<style scoped> .pagination-wrap {
display: flex;
flex-direction: row-reverse;
}
</style>
/* 定义背景色的css */
<style> .el-message-box__wrapper{
background-color: rgba(0, 0, 0, 0.8);
}
</style>
实现效果:

边栏推荐
- [run the script framework in Django and store the data in the database]
- JDBC 在性能测试中的应用
- 有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
- In the post epidemic era, the home service robot industry has just set sail
- 2022年制冷与空调设备运行操作上岗证题库及模拟考试
- 2021-03-16 COMP9021第九节课笔记
- Leetcode 207: course schedule (topological sorting determines whether the loop is formed)
- dhcp、tftp基础
- SQL intra statement operation
- LINQ 查询(2)
猜你喜欢

Future trends in automated testing

Vulnhub target: boredhackerblog_ CLOUD AV

2022年流动式起重机司机特种作业证考试题库及在线模拟考试

Synchronous FIFO

Live wire, neutral wire and ground wire. Do you know the function of these three wires?

2021-03-09 COMP9021第七节课笔记

More than observation | Alibaba cloud observable suite officially released

Solve the problem of notebook keyboard disabling failure

一文理解同步FIFO

Utilisation de la fermeture / bloc de base SWIFT (source)
随机推荐
Latest news of awtk: new usage of grid control
Vulnhub target: boredhackerblog: social network
论文笔记: 多标签学习 DM2L
不止于观测|阿里云可观测套件正式发布
SCM stm32f103rb, BLDC DC motor controller design, schematic diagram, source code and circuit scheme
2022 PMP project management examination agile knowledge points (1)
Optimization and practice of Tencent cloud EMR for cloud native containerization based on yarn
Vulnhub target: boredhackerblog_ CLOUD AV
Model effect optimization, try a variety of cross validation methods (system operation)
Nodejs redlock notes
LabVIEW查找n个元素数组中的质数
Part 1: building OpenGL environment
Chapter 3 curve graph of canvas
Qopengl display point cloud file
Chapter 4 line operation of canvas
The applet reads more than 20 data, and the cloud function reads more than 100 restrictions
The first exposure of Alibaba cloud's native security panorama behind the only highest level in the whole domain
Introduction to software engineering - Chapter 3 - Requirements Analysis
软件工程导论——第三章——需求分析
"Adobe international certification" about Adobe Photoshop, creating and modifying brush tutorials?