本文实例讲述了jQuery实现的浮动层差异浏览器居中显示效果。分享给大家供大家参考，具体如下：

1.在页面的头中引入jQuery

脚本类型=' text/JavaScript ' language=' JAVAScript ' src=' http : jquery-1。7 .2 .量滴js '/脚本2 .在页面的头中加入浮动层和遮罩层的样式

样式#预览div { z-index : 9999位置：绝对；display:none背景# fffborder-top:5px实心# 999;边框-底部：7px实心# 999;边框-左侧：5px实心# 999;右边框：7px实心# 999;}.掩码{ color: # C7EDCC背景色： # 999;位置：绝对；top:0pxleft:0px宽度：100%;高度height :3000 pxo capacity : 0.6 filter : ' alpha(不透明度=60 ');filter: alpha(不透明度=60);}/style3 .在页面的底部加上浮动的差异

div id='previewDiv '表id='head' trtd短消息预览/TD/tr/table table align=' center ' trtd div class=' zhnx _ nei Rong ' H3您收到了来自我们的回复/H3 p='段洛'内容：这是浮动层居中的实例/span/p/div class=' zhnx _ hui fu ' pa href=' JAVAScript : open '(//www .JB 51。net/')；'查看我们/a/p/div/TD/tr/table table align=' center ' trtd divinput type=' button ' value='关闭onclick=' hide()；//div/td/tr /table/div4 .添加显示和隐藏的射流研究…函数

函数show(){ //添加并显示遮罩层$('div id='mask'/div ').addClass(')掩码')。单击(函数(){}).appendTo("正文")。fadeIn(0)；文件。getelementbyid(' mask ')。风格。display=' blockvar窗口宽度=文档。文档元素。客户端宽度；var窗口高度=文档。文档元素。客户身高；var popupHeight=$('#previewDiv ').高度();var popupWidth=$('#previewDiv ').宽度();$('#previewDiv ').css({ 'position': 'absolute '，' top ' :(window height-Popupheight)/2 $(文档)。scrollTop()，' left ' :(窗口宽度-Popupwidth)/2 })；$('#previewDiv ').show()；}函数hide(){ $('#mask ').移除();$('#previewDiv ').hide()；}完整实例代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title TeSt/title script type=' text/JAVAScript ' language=' JAVAScript ' src=' http : jquery-1。7 .2 .量滴js '/script/header dystyle # preview div { z-index : 9999；位置：绝对；display:none背景# fffborder-top:5px实心# 999;边框-底部：7px实心# 999;边框-左侧：5px实心# 999;右边框：7px实心# 999;}.掩码{ color: # C7EDCC背景色： # 999;位置：绝对；top:0pxleft:0px宽度：100%;高度height :3000 pxo capacity : 0.6 filter : ' alpha(不透明度=60 ');filter: alpha(不透明度=60);}/stylediv id='previewDiv '表id='head' trtd短消息预览/TD/tr/table table align=' center ' trtd div class=' zhnx _ nei Rong ' H3您收到了来自我们的回复/H3 p='段洛'内容：这是浮动层居中的实例/span/p/div class=' zhnx _ hui fu ' pa href=' JAVAScript : open '(//www .JB 51。net/')；'查看我们/a/p/div/TD/tr/table table align=' center ' trtd divinput type=' button ' value='关闭onclick=' hide()；//div/td/tr /table/divscript类型='text/javascript '语言='javascript '函数show(){ //添加并显示遮罩层$('div id='mask'/div ').addClass(')掩码')。单击(函数(){}).appendTo("正文")。fadeIn(0)；文件。getelementbyid(' mask ')。风格。display=' blockvar窗口宽度=文档。文档元素。客户端宽度；var窗口高度=文档。文档元素。客户身高；var popupHeight=$('#previewDiv ').高度();var popupWidth=$('#previewDiv ').宽度();$('#previewDiv ').css({ 'position': 'absolute '，' top ' :(窗口高度-Popupheight)/2 $(文档).scrollTop()，' left ' :(窗口宽度-Popupwidth)/2 })；$('#previewDiv ').show()；}函数hide(){ $('#mask ').移除();$('#previewDiv ').hide()；} show()；/脚本/正文/html运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。