最近在做一个关于弹出层的，所以做了一篇弹出层和消除的效果，很简单，就是利用div缓慢透明实现动画效果。这也是我的第一篇博客，不喜勿喷，谢谢。希望能帮到你。
记得加上juqeryxxx.js（加上之后才能使用jquery）
<html>
<head>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 32%;
width: 400px;
height: 200px;
padding: 0px;
border: 2px solid #F7F8F8;
background-color: white;
z-index: 1002;
overflow: auto;
-webkit-border-radius: 5px;/* chrom椭圆? */
-moz-border-radius: 5px;/* huohu div椭圆 */
}
.title {
height: 35px;
width: 400px;
background-color: #F7F8F8;
z-index: 1002;
font-size: 18;
}
.titleMainName{
width:100px;
height:30px;
padding-left: 10px;
margin-left:5px;
padding-top:2px;
align:left;
font-size:18px;
font-weight:bold;
position: absolute;
}
.titleDivClose{
width:20px;
height:30px;
float:right;
margin-left:375px;
font-size:24px;
color:blue;
position: absolute;
font-weight: bold;
}
</style>
<script>
function xxx(){
alert("xxx");
document.getElementById("light").style.display="block";
document.getElementById("fade").style.display="block";
}
</script>
</head>
<body>
<div id="light" class="white_content">
<div id="title" class="title" name="title">
<p>
<font class="titleMainName" id="titleMainName" name="titleMainName"">邮箱信息</font>
<font class="titleDivClose" id="titleDivClose" name="titleDivClose"><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick="$('#light').animate({ opacity: 'hide'}, 'slow');$('#fade').animate({opacity: 'hide' }, 'slow')">x</a></font>
</p>
</div>
</div>
<div id="fade" class="black_overlay"></div>
<a οnclick="xxx()">xxxx</a>
</body></html>
代码：jquery： $("#light").animate({opacity:"hide"}, "slow");//隐藏div
$("#fade").animate({opacity:"hide"}, "slow");//隐藏后面的div
$("#light").animate({opacity:"show"}, "slow");//显示
$("#fade").animate({opacity:"show"}, "slow");
HTML代码：<div id="light" class="white_content">
<div id="title" class="title" name="title">
<p>
<font class="titleMainName" id="titleMainName" name="titleMainName" "><h2>客户信息</h2>
</font> <font class="titleDivClose" id="titleDivClose" name="titleDivClose"
><h2><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick="$('#light').animate({ opacity: 'hide'}, 'slow');$('#fade').animate({opacity: 'hide' }, 'slow')">X</a></h2>
</font>
</p>
</div>
<div id="customerInfo" name="customerInfo" class="customerInfo">
<!-- 客户信息 -->
DIV CSS样式自行修改，触发事件自己写~
</div>
</div>
<div id="fade" class="black_overlay"></div>
CSS代码：.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 665px;
height: 50%;
padding: 0px;
border: 2px solid #F7F8F8;
background-color: white;
z-index: 1002;
overflow: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.title {
height: 35px;
width: 100%;
background-color: #F7F8F8;
z-index: 1002;
font-size: 18;
}
.titleMainName{
width:100px;
height:30px;
padding-left: 10px;
margin-left:5px;
padding-top:9px;
align:left;
font-size:18px;
font-weight:bold;
position: absolute;
}
.titleDivClose{
width:10px;
height:30px;
padding-top:7px;
float:right;
margin-left:635px;
position: absolute;
}
.customerInfo{
width:78%;
height:80%;
cursor:pointer;
text-decoration:none;
font-size: 16px;
color:red;
padding-left: 80px;
padding-top:10px;
font-weight: bold;
position: absolute;
}
![门户通专访草根站长九天狼：做站贵在坚持[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)