JS遮罩层效果 兼容ie firefox jQuery遮罩层【jquery】

web前端|js教程

JS,遮罩层

web前端-js教程

cms电商系统源码,ubuntu查看显卡状态,tomcat打开一闪,excel插件爬虫,在线php学习网站技术,茶山seo优化lzw

//显示灰色JS遮罩层

function showBg(ct,content){

var bH=$("body").height();

var bW=$("body").width()+16;

var objWH=getObjWh(ct);

$("#fullbg").css({width:bW,height:bH,display:"block"});

var tbT=objWH.split("|")[0]+"px";

var tbL=objWH.split("|")[1]+"px";

$("#"+ct).css({top:tbT,left:tbL,display:"block"});

$("#"+content).html("

正在加载，请稍后...

");

$(window).scroll(function(){resetBg()});

$(window).resize(function(){resetBg()});

}

function getObjWh(obj){

var st=document.documentElement.scrollTop;//滚动条距顶部的距离

var sl=document.documentElement.scrollLeft;//滚动条距左边的距离

var ch=document.documentElement.clientHeight;//屏幕的高度

var cw=document.documentElement.clientWidth;//屏幕的宽度

var objH=$("#"+obj).height();//浮动对象的高度

var objW=$("#"+obj).width();//浮动对象的宽度

var objT=Number(st)+(Number(ch)-Number(objH))/2;

var objL=Number(sl)+(Number(cw)-Number(objW))/2;

return objT+"|"+objL;

}

function resetBg(){

var fullbg=$("#fullbg").css("display");

if(fullbg=="block"){

var bH2=$("body").height();

var bW2=$("body").width()+16;

$("#fullbg").css({width:bW2,height:bH2});

var objV=getObjWh("dialog");

var tbT=objV.split("|")[0]+"px";

var tbL=objV.split("|")[1]+"px";

$("#dialog").css({top:tbT,left:tbL});

}

}

//关闭灰色JS遮罩层和操作窗口

function closeBg(){

$("#fullbg").css("display","none");

$("#dialog").css("display","none");

}

*{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

}

#fullbg{

background-color: Gray;

display:none;

z-index:3;

position:absolute;

left:0px;

top:0px;

filter:Alpha(Opacity=30);

/* IE */

-moz-opacity:0.4;

/* Moz + FF */

opacity: 0.4;

}

#dialog {

position:absolute;

width:200px;

height:200px;

background:#F00;

display: none;

z-index: 5;

}

#main {

height: 1500px;

}

点击这里看JS遮罩层效果

app浏览器源码下载,Ubuntu安不安驱动,tomcat本地网站测试,php爬虫 正则,php编程风格,沈阳品质抖音seo优化多少钱lzw

易语言硬件断点源码,ubuntu主题美化没用,tomcat8解压版,异步爬虫库,php用什么运行,海外seo海外seo1lzw

关闭