經常看到有各種各樣的彈窗，一直不知道是怎麼回事，查了查，原理挺簡單的。
先貼出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=)