js遮罩层

最新推荐文章于 2019-07-03 19:48:02 发布

zhao6886

最新推荐文章于 2019-07-03 19:48:02 发布

阅读量366

点赞数

分类专栏： css前台 js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zhao6886/article/details/23789765

版权

css前台同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
    var docElement = function() {

    //arguments 函数的参数个数
    //判断是否存在Id元素
    return document.getElementById(arguments[0]) || false;
}

function openNewDiv(centerShowDivId) {
  var seeId = "seeId";

  //防止id重复
  if(docElement(centerShowDivId)){
  document.body.removeChild(docElement(centerShowDivId));
  }
  if(docElement(seeId)){
  document.body.removeChild(docElement(seeId));
  }

  //mask遮罩层
  var seeDiv = document.createElement("div");
  seeDiv.id = seeId;
  seeDiv.style.position = "absolute";

  seeDiv.style.zIndex = "1";
  _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
  _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
  seeDiv.style.width = _scrollWidth + "px";
  seeDiv.style.height = _scrollHeight + "px";
  seeDiv.style.top = "0px";
  seeDiv.style.left = "0px";
  seeDiv.style.background = "red";

  //透明度IE
  seeDiv.style.filter = "alpha(opacity=40)";

  //透明度火狐
  seeDiv.style.opacity = "0.40";
  document.body.appendChild(seeDiv);

  //新弹出层
  var centerShowDiv = document.createElement("div");
  centerShowDiv.id = centerShowDivId;
  centerShowDiv.style.position = "absolute";

  //显示在newMask前面优先级
  centerShowDiv.style.zIndex = "9999";
  centerShowDivWidth = 400;
  centerShowDivHeight = 200;
  centerShowDiv.style.width = centerShowDivWidth + "px";
  centerShowDiv.style.height = centerShowDivHeight + "px";
  //alert(document.body.scrollTop+"~~"+document.body.scrollLeft);0 0
  centerShowDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - centerShowDivHeight/2) + "px";
  centerShowDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 -centerShowDivWidth/2) + "px";
  centerShowDiv.style.background = "#EFEFEF";
  centerShowDiv.style.border = "1px solid #860001";
  centerShowDiv.style.padding = "5px";
  centerShowDiv.innerHTML = "弹出层内容 ";
  document.body.appendChild(centerShowDiv);

  //弹出层滚动居中
  function newDivCenter()
  {
   centerShowDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - centerShowDivHeight/2) + "px";
   centerShowDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - centerShowDivWidth/2) + "px";
  }

  //document.all=true可以判断是否IE
  if(document.all){

  //支持IE
  window.attachEvent("onscroll",newDivCenter);
   }
  else{

   //支持火狐
   window.addEventListener('scroll',newDivCenter,false);
  }

  //关闭新图层和mask遮罩层
  var newA = document.createElement("a");
  newA.href = "#";
  newA.innerHTML = "关闭";
  newA.onclick = function(){

   //document.all=true可以判断是否IE
   if(document.all){

    //支持IE
    window.detachEvent("onscroll",newDivCenter);
   }

   else{
    //支持火狐
    window.removeEventListener('scroll',newDivCenter,false);
   }
   document.body.removeChild(docElement(centerShowDivId));
   document.body.removeChild(docElement(seeId));
   return false;
  }
  centerShowDiv.appendChild(newA);
}
</script>
<html>
<body>
<input type="text"/>
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js遮罩层

var docElement = function() { //arguments 函数的参数个数 //判断是否存在Id元素 return document.getElementById(arguments[0]) || false; } function openNewDiv(centerShowDivId) { var seeId = "
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。