添加最顶层js广告_JS打造div遮罩层霸屏广告

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

html>

DIV CSS遮罩层

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';

}

#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;}