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