好看的dialog样式

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.mask{
100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
background:rgba(0,0,0,0.8);
}
.dialog{
260px;
height:260px;
margin:-130px 0 0 -130px;
z-index:1001;
background:#fff;
position:absolute;
left:50%;
top:50%;
border-radius:8px;
}
.dialog h3{
font-weight:normal;
font-size:18px;
padding-top:5px;
padding-left:20px;
border-bottom:1px solid #ddd;
}
.icon-box{
80px;
height:80px;
border-radius:45px;
border-color: #ff9090;
border:4px solid #f63;
margin: 15px auto 5px;
position:relative;
text-align:center;
}
.line1{
background:#ff9090;
height:5px;
position:absolute;
left:17px;
top:40px;
40px;;
text-align:center;
margin:0 auto;
transform:rotate(45deg);
}
.line2{
background:#ff9090;
height:5px;
position:absolute;
left:17px;
top:40px;
40px;;
text-align:center;
margin:0 auto;
transform:rotate(-45deg);
}
.success{
text-align:center;
color:#f00;
}
.button{
margin:20px auto;
text-align:center;


}
button{
100%;
height:40px;
background:#6c3;
border:none;
border-radius:8px;
color:#fff;
font-size:16px;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div class="mask"></div>
<div class="dialog">
<div class="icon">
<div class="icon-box">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<div class="success">操作成功

</div>
<div class="button">
<button>确定</button>
</div>

</div>
</body>
</html>

原文地址:https://www.cnblogs.com/zhouzhou163/p/6100481.html