.mask {
position:fixed;
left:0;
top:0;
width:100%;
height:100vh;
background-color:rgb(0,0,0);
opacity:.8;
}
.hide {
display:none;
}
.alert {
width:400px;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
border:1px solid rgba(0,0,0,.1);
box-shadow:1px 1px 5px rgba(0,0,0,.2);
border-radius:3px;
background-color:#fff;
position:fixed;
top:100px;
left:100px;
}
.alert .title {
height:40px;
line-height:40px;
padding:0 10px;
}
.alert .title h2 {
font-weight:normal;
margin:0;
font-size:14px;
}
.alert .content {
padding:10px;
background-color:#eee;
min-height:100px;
}
.alert .button {
padding:0 10px;
height:50px;
line-height:50px;
text-align:right;
}
.alert .button button {
background-color:#35a9ff;
color:#fff;
border-radius:3px;
border:0;
outline:0;
height:30px;
line-height:30px;
font-size:14px;
cursor:pointer;
padding:0 15px;
margin-left:10px;
}
更新时间:2021-07-27 00:09:58
很粗糙的遮罩层,但功能却全都实现了,如果需要,内容只需要进行少量更改就可以搬到项目里使用,希望对你有帮助!