如何实现全屏遮罩层效果

日期: 2022-12-08 13:42:19 分类: 前端浏览量：留言数： 98277

本章节介绍一下如何实现点击按钮能够弹出一个弹出层，并且这个弹出层是全屏的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
function show(){
  var win=document.getElementById("win");
  win.style.display="block";
  win.style.position="absolute";
  win.style.top="50%";
  win.style.left="50%";
  win.style.marginTop="-75px";
  win.style.marginLeft="-150px";
  win.style.background="cyan";
  win.style.width="300px";
  win.style.height="200px";
  win.style.zIndex="1000";
  var mark = document.createElement("div");
  mark.setAttribute("id","mark");
  mark.style.background="#000";
  mark.style.width="100%";
  mark.style.height="100%";
  mark.style.position="absolute";
  mark.style.top="0";
  mark.style.left="0";
  mark.style.zIndex="500";
  mark.style.opacity="0.3";
  mark.style.filter="Alpha(opacity=30)";
  document.body.appendChild(mark);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    show();
  }
}
</script>
</head>
<body>
<center>
  <div><input type="button" value="查看效果" id="bt" /></div>
  <div id="win" style="display:none;"></div>
</center>
</body>
</html>

上面的代码中，点击按钮可以弹出一个全屏的遮罩层效果，但是它并不是完美的。

因为当玩野的内容超出一屏的高度的时候，就会出现滚动条，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
  margin:0px;
  padding:0px;
}
#antzone {
  margin:0px auto;
  width:20px;
  height:1200px;
  background:#ccc;
}
</style>
<script type="text/javascript">
function show(){
  var win=document.getElementById("win");
  win.style.display="block";
  win.style.position="absolute";
  win.style.top="50%";
  win.style.left="50%";
  win.style.marginTop="-75px";
  win.style.marginLeft="-150px";
  win.style.background="cyan";
  win.style.width="300px";
  win.style.height="200px";
  win.style.zIndex="1000";
  var mark = document.createElement("div");
  mark.setAttribute("id","mark");
  mark.style.background="#000";
  mark.style.width="100%";
  mark.style.height="100%";
  mark.style.position="absolute";
  mark.style.top="0";
  mark.style.left="0";
  mark.style.zIndex="500";
  mark.style.opacity="0.3";
  mark.style.filter="Alpha(opacity=30)";
  document.body.appendChild(mark);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    show();
  }
}
</script>
</head>
<body>
<center>
  <div><input type="button" value="查看效果" id="bt" /></div>
  <div id="win" style="display:none;"></div>
</center>
<div id="antzone"></div>
</body>
</html>

但是如果高度超过一屏的话，就会出现滚动条，下拉滚动条的话，那就有点惨不忍睹了。

上面的问题还是很好解决的，只要给body添加一个overflow:hidden即可:

document.body.style.overflow = "hidden";

但是上面的代码还不够完美，因为有可能我们弹出的那个窗口高度是很大的，看如下代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
  margin:0px;
  padding:0px;
}
#antzone {
  margin:0px auto;
  width:20px;
  height:1200px;
  background:#ccc;
}
</style>
<script type="text/javascript">
function show(){
  var win=document.getElementById("win");
  win.style.display="block";
  win.style.position="absolute";
  win.style.top="50%";
  win.style.left="50%";
  win.style.marginTop="-75px";
  win.style.marginLeft="-150px";
  win.style.background="cyan";
  win.style.width="300px";
  win.style.height="800px";
  win.style.zIndex="1000";
  var mark = document.createElement("div");
  mark.setAttribute("id","mark");
  mark.style.background="#000";
  mark.style.width="100%";
  mark.style.height="100%";
  mark.style.position="absolute";
  mark.style.top="0";
  mark.style.left="0";
  mark.style.zIndex="500";
  mark.style.opacity="0.3";
  mark.style.filter="Alpha(opacity=30)";
  document.body.appendChild(mark);
  document.body.style.overflow = "hidden";
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    show();
  }
}
</script>
</head>
<body>
<center>
  <div><input type="button" value="查看效果" id="bt" /></div>
  <div id="win" style="display:none;"></div>
</center>
<div id="antzone"></div>
</body>
</html>

上面的代码中，弹出窗口的高度是800px，但是由于设置了body的overflow:hidden，所以没法显示完整。

在这种情况下，我们也需要计算遮罩层的高度了，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
  margin:0px;
  padding:0px;
}
#antzone {
  margin:0px auto;
  width:20px;
  height:1200px;
  background:#ccc;
}
</style>
<script type="text/javascript">
function show(){
  var win=document.getElementById("win");
  win.style.display="block";
  win.style.position="absolute";
  win.style.top="50%";
  win.style.left="50%";
  win.style.marginTop="-75px";
  win.style.marginLeft="-150px";
  win.style.background="cyan";
  win.style.width="300px";
  win.style.height="800px";
  win.style.zIndex="1000";
  var mark = document.createElement("div");
  mark.setAttribute("id","mark");
  mark.style.background="#000";
  mark.style.width="100%";
  mark.style.height=document.body.offsetHeight+"px";
  mark.style.position="absolute";
  mark.style.top="0";
  mark.style.left="0";
  mark.style.zIndex="500";
  mark.style.opacity="0.3";
  mark.style.filter="Alpha(opacity=30)";
  document.body.appendChild(mark);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    show();
  }
}
</script>
</head>
<body>
<center>
  <div><input type="button" value="查看效果" id="bt" /></div>
  <div id="win" style="display:none;"></div>
</center>
<div id="antzone"></div>
</body>
</html>

上面的核心代码如下:

mark.style.height=document.body.offsetHeight+"px";

本文地址： http://www.zzsi.net/code/web/98277.html

本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。

标签: 实例代码上一篇: jQuery Pagination分页插件_动力节点Java学院整理下一篇: js轮播图的插件化封装详解