jQuery遮罩层效果实例分析

2016-01-15 11:24作者：fang

本文实例分析了jQuery遮罩层效果。分享给大家供大家参考，具体如下：

先来看看示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>

<title>Example | xHTML1.0</title>

<mce:style>

<!-- *{

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

font-size:12px;

}

#full_box{

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;

}

-->

</mce:style>

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

font-size:12px;

}

#full_box{

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;

}

</style>

<mce:script type="text/javascript">

<!--

function showBox() {

var bH = $(window).height();

var bW = $(window).width();

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

var objWH = getObjWh('dialog');

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

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

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

$("#dialog_content").html("<div style="text-align:center" mce_style="text-align:center">正在加载，请稍后...</div>");

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

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

}

function resetBox() {

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

if (full_box == 'block') {

var bH = $(window).height();

var bW = $(window).width();

var objWH = getObjWh('dialog');

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

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

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

}

function getObjWh(obj) {

var st = $(window).scrollTop();

var sl = $(window).scrollLeft();

var ch = $(window).height();

var cw = $(window).width();

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 closeBox() {

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

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

}

// -->

</mce:script>

<button id="click" onclick="showBox()">click</button>

</div>

</body>

</html>

其实遮罩层原理很简单。

一个div 遮住下面的内容。

其中比较关键的一个css 样式是

x-index: 整数值

数值越大在越上层，越小就在越下层，可以是负数。

上面的js 代码有部分错误。下面已经修正。

//显示层

function showBox(id) {

var bH = document.body.offsetHeight;//$(window).height();

var bW = document.body.offsetWidth;//$(window).width();

if (bH < $(window).height())

{

bH = $(window).height();

}

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

var objWH = getObjWh('dialog');

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

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

if(id=='template'){

$("#div_template").show();

}else if(id == 'history'){

$("#div_history").show();

}else{

$("#tree_"+id).show();

}

$(window).scroll(function (){ resetBox(id);});

$(window).resize(function (){ resetBox(id);});

}

//重置层

function resetBox(id) {

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

if (full_box == 'block') {

var bH = document.body.offsetHeight;//$(window).height();

var bW = document.body.offsetWidth;//$(window).width();

if (bH < $(window).height())

{

bH = $(window).height();

}

var objWH = getObjWh('dialog');

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

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

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

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

}

//获得层参数

function getObjWh(obj) {

var st = $(window).scrollTop();

var sl = $(window).scrollLeft();

var ch = $(window).height();

var cw = $(window).width();

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 closeBox(id) {

if(id == 'template'){

$("#div_template").hide();

}else if(id == 'history'){

$("#div_history").hide();

}else{

$("#tree_"+id).hide();

}

$("#full_box").hide();

}

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