当我们打开某个购物网站时,通常会弹出一则广告,在没有关闭这则广告之前,网站的其他内容是无法点击的。刚开始我也很好奇这是怎么做的,经过研究发现,它的原理很简单:当用户打开该页面时,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;}