做一個帶X的彈出DIV

項目的頁面需要一個彈出效果，但又不能是網頁，果斷用一個DIV來做。

hide-data-show是彈出的div，X其實是個帶鏈接的x。
hide-data-show2是背景遮罩。

<div class="hide-data-show">
<a href="javascript:;" title="關閉" class="close">×</a>
</div>
<div class="hide-data-show2"></div>

jquery的代碼如下：

    $('.data-show').click(function(){
        $('.hide-data-show2').fadeIn(100);
        $('.hide-data-show').slideDown(200);
    })

    $('.hide-data-show .close').click(function(){
        $('.hide-data-show2').fadeOut(100);
        $('.hide-data-show').slideUp(200);
    })

CSS：

#hide-data-show{
    z-index:9999;
    position:fixed;
    top:50%;
    left:50%;
    width:690px;
    height:360px;
    margin:-180px 0 0 -330px;
    border-radius:5px;
    border:solid 2px #666;
    background-color:#fff;
    display:none;
    box-shadow: 0 0 10px #666;
}
#hide-data-show .close{
    float:right;
    color:#999;
    padding:5px;
    margin:-2px -5px -5px;
    font:bold 14px/14px simsun;
    text-shadow:0 1px 0 #ddd
}
#hide-data-show2{
    z-index: 9997;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.4;
    filter:alpha(opacity=40);
    display:none
}