jQuery实现可兼容IE6的遮罩功能详解
本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考,具体如下:
最精简,最强大的jQuery遮罩层效果。
当浏览器改变大小时,遮罩层的大小会相应地改变。
遮罩层上方的对话框可随scroll的改变而改变,即对话框在浏览器居中显示。
HTML代码
点击这里看jQuery遮罩层效果.
本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考,具体如下:
最精简,最强大的jQuery遮罩层效果。
当浏览器改变大小时,遮罩层的大小会相应地改变。
遮罩层上方的对话框可随scroll的改变而改变,即对话框在浏览器居中显示。
HTML代码
点击这里看jQuery遮罩层效果.
CSS代码
body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0; } #main{ height:1800px; padding-top:90px; text-align:center; } #fullbg{ background-color:Gray; left:0px; opacity:0.5; position:absolute; top:0px; z-index:3; filter:alpha(opacity=50);/*IE6*/ -moz-opacity:0.5;/*Mozilla*/ -khtml-opacity:0.5;/*Safari*/ } #dialog{ background-color:#FFF; border:1pxsolid#888; display:none; height:200px; left:50%; margin:-100px00-100px; padding:12px; position:fixed!important;/*浮动对话框*/ position:absolute; top:50%; width:200px; z-index:5; } #dialogp{ margin:0012px; } #dialogp.close{ text-align:right; }
jquery代码
//显示灰色jQuery遮罩层 functionshowBg(){ varbh=$("body").height(); varbw=$("body").width(); $("#fullbg").css({ height:bh, width:bw, display:"block" }); $("#dialog").show(); } //关闭灰色jQuery遮罩 functioncloseBg(){ $("#fullbg,#dialog").hide(); }
这里别忘记引入jquery文件
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。