好看的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{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
background:rgba(0,0,0,0.8);
}
.dialog{
width:260px;
height:260px;
margin:-130px 0 0 -130px;
z-index:1001;
background:#fff;
position:absolute;
left:50%;
top:50%;
border-radius:8px;
text align center
}
.dialog h3{
font-weight:normal;
font-size:18px;
padding-top:5px;
padding-left:20px;
border-bottom:1px solid #ddd;
}
.icon-box{
width: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;
width:40px;;
text-align:center;
margin:0 auto; transform:rotate(45deg); }
.line2{
background:#ff9090; height:5px;
position:absolute;
left:17px;
top:40px;
width:40px;;
text-align:center;
margin:0 auto; transform:rotate(-45deg); }
.success{
text-align:center;
color:#f00;
}
.button{
margin:20px auto;
text-align:center;
}
button{
width: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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。