史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层

woshilee 2021-09-06 原文

史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层

<!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“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title>
<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript”>

//自定义插件
(function ($) {
$.fn.shade = function (options) {
  //定义参数
  var defaults = {
   shade_dialog: “”
  };
  var options = $.extend(defaults, options);

  $(this).click(function () {
   $.showBg(options.shade_dialog);
  });
  $(“.closeIt”).click(function(){
   $.closeBg();
  });

  //添加方法
  jQuery.extend({
   //显示灰色JS遮罩层
  showBg:function(ct){
  var bH=$(“body”).height();
  var bW=$(“body”).width()+20;
  var objWH=$.getObjWh(ct);
  $(“.shade_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”});
  //$(“.”+ct+”_content”).load(“005load.html”);
  $(window).scroll(function(){$.resetBg()});
  $(window).resize(function(){$.resetBg()});
  } ,
  //提示框距离浏览器上,左的距离格式: 上|左
  getObjWh:function(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;
  } ,
  resetBg:function(){
  var fullbg=$(“.shade_fullbg”).css(“display”);
  if(fullbg==”block”){
  var bH2=$(“body”).height();
  var bW2=$(“body”).width()+20;
  $(“.shade_fullbg”).css({width:bW2,height:bH2});
  var objV=$.getObjWh(“shade_dialog”);
  var tbT=objV.split(“|”)[0]+”px”;
  var tbL=objV.split(“|”)[1]+”px”;
  $(“.”+options.shade_dialog).css({top:tbT,left:tbL});
  }
  } ,
  //关闭灰色JS遮罩层和操作窗口
  closeBg:function(){
  $(“.shade_fullbg”).css(“display”,”none”);
  $(“.”+options.shade_dialog).css(“display”,”none”);
  }
  });

};

})(jQuery);

//调用
$(function(){
$(“.showShade”).shade({shade_dialog: “shade_dialog”});
});

</script>
<style type=”text/css”>
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.shade_fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=40);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}

.shade_dialog {
position:absolute;
width:340px;
height:170px;
display: none;
z-index: 5;
border:1px solid #C2C2C2;
background:#F0F0F0;
padding:10px;
}

#main {
height: 1500px;
}
</style>
</head>
<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id=”main”>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href=”#rhis” class=”showShade”>点击这里看JS遮罩层效果</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<!– JS遮罩层 –>
<div class=”shade_fullbg”></div>
<!– end JS遮罩层 –>
<!– 对话框 –>
<div class=”shade_dialog”>
<div style=”text-align:right;”><a href=”#” class=”closeIt”>关闭</a></div>
<div class=”shade_dialog_content”>asd四大佛教</div>
</div>
<!– JS遮罩层上方的对话框 –>
</body>
</html>