做一个带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
}