JQuery实现的弹窗效果
这是笔者实际项目中的一个需求，我们先来看看特效。
页面加载时弹出窗口，点击关闭按钮，窗口消失并呈现动画效果。
实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<style type="text/css">
#infobox{
position:absolute;
width:480px;
height:300px;
border:#ccc solid 1px;
z-index: 9999;
}
#infobox_header h1{
height:30px;
font-size: 18px;
margin-top:0px;
line-height: 30px;
text-align: center;
background-image:url("image/header_bg.png");
}
#infobox_header h1 #close_btn{
width: 15px;
height: 15px;
border:#ccc solid 1px;
float: right;
background-image: url("image/close.png");
margin-top:5px;
margin-right:5px;
cursor: pointer;
}
#noticeinfo{
width:440px;
height:240px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="infobox">
<div id="infobox_header">
<h1>公告信息<div id="close_btn"> </div></h1>
</div>
<div id="noticeinfo">
<p>重大通知，本行于端午节推出xxxx活动，活动内容xxxx,活动截至日期xxxx-xx-xx。</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#infobox").hide();
$(document).ready(function(){
$("#infobox").slideDown(2000);
});
$("#infobox").css({
"left":($(document).width() - 480) / 2,
"top":($(document).height() - 300) / 2
});
$("#close_btn").click(function(){
//$("#infobox").fadeOut(2000);
$("#infobox").hide(2000);
});
$(window).resize(function(){
$("#infobox").css({
"left":($(document).width() - 480) / 2,
"top":($(document).height() - 300) / 2
});
});
</script>
</html>
源码下载：http://download.csdn.net/detail/rongbo_j/8822805
图片资源可以从源码中获取。
