当我们打开某个购物网站时，通常会弹出一则广告，在没有关闭这则广告之前，网站的其他内容是无法点击的。刚开始我也很好奇这是怎么做的，经过研究发现，它的原理很简单：当用户打开该页面时，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
转载请注明: haoshu发表于浩叔逛逛>>https://www.haoshu888.com/js/245.html