Of Stack

Example analysis of jQuery mask layer effect

  • 2020-12-05 17:06:51
  • OfStack

In this paper, the effect of jQuery mask layer is analyzed. To share for your reference, the details are as follows:

Take a look at the sample code: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>
<style mce_bogus="1">
*{
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"> Loading. Please hold on ...</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 id="full_box"></div>
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align:center;" mce_style="text-align:center;">
<a href="#" mce_href="#" onclick="closeBox();"> Shut down </a>
</div>
</div>
</body>
</html>

The principle of the mask layer is simple.

1 div covers the content below.

One of the key css styles is

x - index: integer value

The larger the number is, the higher it is, and the smaller the number is, the lower it is. It can be negative.

The js code above is partially faulty. This has been fixed below. 


// According to layer 
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);});
}
// Reset the layer 
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});
    }
}
// Obtain layer parameters 
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;
}
// Close the layer 
function closeBox(id) {
    if(id == 'template'){
       $("#div_template").hide();
    }else if(id == 'history'){
      $("#div_history").hide();
    }else{
      $("#tree_"+id).hide();
    }
    $("#full_box").hide();
}

For more information about jQuery special effects, please visit our special topic: Summary of Common jQuery Special Effects.

I hope this article has been helpful for jQuery programming.

Related articles: