jQuery实现的浮动层div浏览器居中显示效果

本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考，具体如下：
1.在页面的head中引入jQuery

<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.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（"http://www.jb51.net/"）;">查看脚本之家</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（）;}

完整实例代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script></head><body><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><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（"http://www.jb51.net/"）;">查看脚本之家</a></p></div></td></tr></table><table align="center"><tr><td><div><input type="button" value=" 关 闭 " onclick="hide（）;"/></div></td></tr></table></div><script type="text/javascript" language="javascript" > 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（）;}show（）;</script></body></html>

运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。