弹窗是网页中经常看到的效果，以前的弹窗是用window.open()等方式在浏览器窗口新建另一个新窗口来完成的，这种弹窗方式现在已经被很多浏览器所拦截。今天我们来用更加友好的方式来实现弹窗效果。完成的功能效果如图：
如图，在浏览器的左上方是两个button按钮，按下之后分别弹出左下角的窗口和中间的窗口，右下角的窗口当页面加载完成之后自动慢慢显示，之后又徐徐的淡出。基于div+css的模式，我们的先来建立html页面。
window.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实战:窗口效果</title>
<link type="text/css" rel="stylesheet" href="../css/window.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/window.js"></script>
</head>
<body>
<input type="button" value="左下角显示窗口" id="leftpop" />
<input type="button" value="屏幕中间显示窗口" id="centerpop" /> <div class="window" id="left">
<div class="title">
<img alt="关闭" src="../image/close.gif" />
我是左边显示窗口的标题栏
</div>
<div class="content">
我是左边显示窗口的内容区
</div>
</div>
<div class="window" id="center">
<div class="title">
<img alt="关闭" src="../image/close.gif" />
我是中间显示窗口的标题栏
</div>
<div class="content">
<p>我是中间显示窗口的内容区</p>
</div>
</div>
<div class="window" id="right">
<div class="title">
<img alt="关闭" src="../image/close.gif" />
我是右边显示窗口的标题栏
</div>
<div class="content">
我是右边显示窗口的内容区
</div>
</div>
</body>
</html>
从html代码中可以看到，这里的窗口是用div来实现的，目前的html代码只是描绘了页面的基本骨架，能够效果离窗口效果还相差甚远，不过别急，添加上css代码，页面相对就好看多了。
window.css
.window {
background-color: #D0DEF0;
width: 250px;
/*padding: 2px;*/
margin: 5px;
/*控制窗口绝对定位*/
position: absolute;
display: none;
}
.content {
height: 150px;
background-color: white;
