经常看到有各种各样的弹窗，一直不知道是怎么回事，查了查，原理挺简单的。
先贴出html/css代码
.back {
display:none;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:black;
z-index:1000;
cursor:pointer;
opacity:0.6;
filter:alpha(opacity=60);
}
.box {
position:absolute;
left:25%;
top:25%;
width:500px;
height:auto;
display:block;
z-index:8030;
display: none;
}
.skin{
position:relative;
padding:15px;
background:#f9f9f9;
border:1px solid #eee;
color:#444;
height:300px;
width:485px;
}
.close {
position: absolute;
top:-18px;
right:-18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
background-image: url(fancybox_sprite.png);
}
<body>
<button id="open">Open</button>
<div class="back"></div>
<div class="box">
<div class="skin">
<div class="close"></div> <!--图片按钮及背景取自42qu.com-->
</div>
</div>
</body>
代码很简单，主要的是一个按钮，用于添加弹出窗事件，在实际应用中可以其他任何元素。 另外就是两层div，最开始两个div都是隐藏的，弹窗出来后，.back颜色为透明黑色，box为弹窗，另外还有个close关闭按钮。最终效果如下图
下面我们来用jQuery来实现效果。
$(function() {
$('#open').click(show);
$('.back, .close').click(hide);
function show() {
$('.back').fadeIn(700);
$('.box').fadeIn('normal');
};
function hide() {
$('.back').fadeOut(700);
$('.box').fadeOut('normal');
}
});
这样一个简单的渐隐渐出弹窗就实现了，点击close或黑色透明背景弹出都将关闭。
还有一个效果我没实现，点击这篇文章的品论按钮，弹出弹出时，它的长宽是从中间向两边延伸，消失时也是窗宽向中间缩小直到消失。一直没找到答案，希望你能告诉我
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)