.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
很粗糙的遮罩层,但功能却全都实现了,如果需要,内容只需要进行少量更改就可以搬到项目里使用,希望对你有帮助!