微客导航 » 文章资讯 » jQuery实现可兼容IE6的遮罩功能详解

jQuery实现可兼容IE6的遮罩功能详解

2023-09-24 11:28:04 328

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

返回顶部
3162201930
czq8825@qq.com

jQuery实现可兼容IE6的遮罩功能详解

热门推荐

随机推荐