Question 3 - MessageBox pop-up box, modify the default background color

Project scenario ：

PC End development ,vue + elementUI,

---

The source code section

MessageBox.confirm(`${
      message ? message : ' Whether or not to continue ?'}`, ' Tips ', {
    
          confirmButtonText: ' determine ',
          cancelButtonText: ' Cancel ',
          type: 'warning'
        }).then(() => {
    
        
         })

Problem description

---

Show MessageBox bounced , In some cases , Bullet frame background color （ mask ） It's all black .

---

Cause analysis ：

Maybe it's in addition to elementUI Style source code Set the background color of , The background color of the pop-up box is also set somewhere in the project ,2 Caused by overlapping .

---

Solution ：

1. Find the tag of the bullet box class name . Specific steps （ Take Firefox as an example ）： Display a pop-up box on the page , open F12（ Console ）, Check the pop-up tab , Copy the... Of the selected element class name （el-message-box__wrapper）;
2. In common components 、 style （ It is recommended to put it in public documents ） Redefine the background color in the file ,rgba Values can be modified according to business requirements .
   Be careful ： Must be attached without scoped Of style In the label .

.el-message-box__wrapper{
    
    background-color: rgba(0, 0, 0, 0.4);
}

3. If you need to define the background color , It can not affect other styles of this page , It can be like this ：

/*  Page other styles  */
<style scoped> .pagination-wrap {
    
        display: flex;
        flex-direction: row-reverse;
    }
</style>

/*  Defines the background color css */
<style> .el-message-box__wrapper{
    
        background-color: rgba(0, 0, 0, 0.8);
    }
</style>

---

Realization effect ：