jquery 弹出浮层(div) + 遮蔽层

<style type="text/css">
        .pop-box {  
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
            margin-top: 30px;  
            display: none;  
            position: absolute;  
            background: #FFF;  
            border:solid 1px #6e8bde;  
        }  
       
        .mask {  
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            opacity:0.6;
            filter: Alpha(Opacity=60);
        }
    </style>
   <script language=javascript type="text/javascript">
    function hideDiv() {  
        $("#mask").remove();  
        $("#pop-div").animate({left: 0, top: 0, opacity: "hide" }, "slow");  
    }
    $(function() {
        $('#btnTest').mouseover(function(e){
            //var div_obj = $("#"+div_id);
            var X = e.pageX;      
            var Y = e.pageY;//alert(X+","+Y);
            $('#pop-div').animate({left:X,top:Y-30,opacity:"show"},"slow");
            var windowWidth = document.body.clientWidth;//网页可见区域宽
            var windowHeight = document.body.clientHeight;
            $("<div id='mask'></div>").addClass("mask")  
                                      .width(windowWidth)  
                                      .height(windowHeight)  
                                      .click(function() {hideDiv(); })  
                                      .appendTo("body")  
                                      .fadeIn(200);//使用淡入效果显示隐藏的元素  
        });
    })

   </script>

<form id="form1" runat="server">
    <input type=button id=btnTest  value='test'/>
        <div id='pop-div' style="width:50px;" class="pop-box">
            <span>标题位置</span>
        </div>

</form>