宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-06

本文实例讲述了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程序设计有所帮助。

更多资讯
游戏推荐
更多+