笔记,遮罩。。

记得div的position的 属性的运用,

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<style>
.newCustomerCoupon{
height:100%;
100%;
position:fixed;
z-index:1000;

left:0;
top:0;
_margin-top: 0;
_position: absolute;
_bottom: auto;
_top:expression(eval(document.documentElement.scrollTop));
}

.newCustomerCoupon .skip{
33px;
height: 33px;
background:yellow;
position: absolute;
z-index: 1002;
cursor:pointer;
top: 40%;
left: 45%;
margin: -151px 0 0 251px;
}

.newCustomerCoupon .content{

position: absolute;
z-index: 1001;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
top: 40%;
left: 45%;
margin: -141px 0 0 -201px;
470px;
height:240px;
border:1px solid #CCC;
line-height: 280px;
text-align:center;
font-size: 14px;
background-color: #fff;
overflow:hidden;
}

.newCustomerCoupon .content .content_bg{
background: red;
height:90px;
margin-top:20px;
}

.newCustomerCoupon .content .content_word{
height: 100px;
margin-top: 10px;
text-align:center;
color:#e82833;
line-height: 26px;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}

.newCustomerCoupon .content .content_word .newCustomerShare {
font-size:20px;
}
.newCustomerCoupon .bg{
height:100%;
100%;
background:#000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
_zoom:1;
}
</style>
<body>


<div class="newCustomerCoupon">
<div class="skip"></div>
<div class="content" >
<div class="content_bg" ></div>
<div class="content_word">
<spring:message code="suc.coupon"/>
</div>
</div>

<div class="bg"></div>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/qianduanxiaocaij/p/5407392.html