目的：使用jQuery弹出一个div窗口；这种效果经常应用于页面内容的展示，登录效果的实现。其实，实现这种效果有好多种方式；
效果如下：
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery弹出div窗口</title>
<script type="text/javascript" src="jquery-2.1.1/jquery-2.1.1.js"></script>
<style>
#win{
border:1px gray solid;
/*窗口的高度和宽度*/
width : 300px;
height: 200px;
/*窗口的位置*/
position : absolute;
top : 100px;
left: 450px;
/*开始时窗口不可见*/
display : none;
}
/*控制背景色的样式*/
#title{
background-color:#CCCCCC;
color:#0000FF;
padding-left:3px;
}
/*控制关闭按钮的位置*/
#close{
margin-left: 188px;
/*当鼠标移动到关闭按钮上时，出现小手的效果*/
cursor: pointer;
}
</style>
<script>
function showWin(){
var winNode = $("#win");
//方法1：利用js修改css的值，实现显示效果
// winNode.css("display", "block");
//方法2：利用jquery的show方法，实现显示效果
// winNode.show("slow");
//方法3：利用jquery的fadeIn方法或slideDown方法实现动画效果
//winNode.fadeIn(2000);
winNode.slideDown(2000);
}
function closeWin(){
var winNode = $("#win");
//方法1：修改css的值
//winNode.css("display", "none");
//方法2：jquery的hide方法
//winNode.hide("slow");
//方法3：使用jQuery的fadeOut或slideUp方法
//winNode.fadeOut("slow");
winNode.slideUp(2000);
}
</script>
</head>
<body>
<div style="text-align:center; margin-top:50px"><a onClick="showWin()" href="#">弹出窗口</a> </div>
<div id="win">
<div id="title">标题栏
<span id="close" onClick="closeWin()">关闭</span>
</div>
<div>这是弹出窗口的div内容；</div>
</div>
</body>
</html>