用jquery实现浮动层div的浏览器居中

1.在页面的head中引入jquery

 <script type="text/javascript" src="<%=path%>/js/jquery-1.2.6.js"></script>

 

2.在页面的head中加入浮动层和遮罩层的样式

<style>

#previewDiv{z-index: 9999;position:absolute;display:none;background:#fff;border-top:5px solid #999;border-bottom:7px solid #999;border-left:5px solid #999;border-right:7px solid #999;}
.mask {color:#C7EDCC;background-color:#999;position:absolute;top:0px;left:0px;width:100%;height:3000px;opacity: 0.6;filter: "alpha(opacity=60)";filter: alpha(Opacity=60);}

</style>

 

3.在页面的底部加上浮动的div

<div id="previewDiv"> <table id ="head"> <tr><td>短消息预览</td></tr> </table> <table align="center"> <tr><td> <div class="zhnx_neirong"> <h3>您收到了来自花花的回复</h3> <p class="duanluo">    内容：这是浮动层居中的实例</span></p> </div> <div class="zhnx_huifu"><p><a href="javascript:open('${mailboxBO.mailfrom}');">查看花花的名片</a></p></div> </td></tr> </table> <table align="center"> <tr><td><div><input type="button" value=" 关 闭 " onclick="hide();"/></div></td></tr> </table> </div>

 

4.添加显示和隐藏的js函数

     function show(){ 
       //添加并显示遮罩层  
        $("<div id='mask'></div>").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0);    
        document.getElementById("mask").style.display = "block";
    
        var windowWidth = document.documentElement.clientWidth;  
        var windowHeight = document.documentElement.clientHeight;  
        var popupHeight = $("#previewDiv").height();  
        var popupWidth = $("#previewDiv").width();   
        $("#previewDiv").css({  
            "position": "absolute",  
            "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),  
            "left": (windowWidth-popupWidth)/2
        });
       $("#previewDiv").show();
    }

 

    function hide(){
        $("#mask").remove();
        $("#previewDiv").hide();
    }