首页 > JS专栏 > JS打造div遮罩层霸屏广告
2015
05-30

JS打造div遮罩层霸屏广告

当我们打开某个购物网站时,通常会弹出一则广告,在没有关闭这则广告之前,网站的其他内容是无法点击的。刚开始我也很好奇这是怎么做的,经过研究发现,它的原理很简单:当用户打开该页面时,JS弹出该广告,在广告层在页面的最顶层,中间层是一个div遮罩层,最下面的才是网站的内容。理解了原理,写出来也就不难,浩叔不敢独享,赶紧把源码贴给大家。

<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() { 
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
}
function hidediv() {
document.getElementById("bg").style.display ='none';
document.getElementById("show").style.display ='none';
}
</script>
<style type="text/css">
#bg{position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black;
z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; 
padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; 
overflow: auto; background:url('./images/ad.jpg') no-repeat;}
#show .close{position: absolute; right:0; top:0;}
#show .close img{width:40px; height:40px; cursor: pointer;}
</style>
</head>
<body>
<div id="bg"></div>
<div id="show">
   <div class="close"><img src="./images/close.png" id="btnclose" onclick="hidediv();"/></div>
</div>
</body>
</html>

下载地址:遮罩层广告Div_AD.zip