如何实现全屏遮罩层效果

快乐打工仔 分类:实例代码

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

代码实例如下:

<!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";
网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容