En nuestro post anterior vimos como avisar a Google Analyctis sobre el uso de AdBlock, en este post veremos como bloquear al usuario y no permitirle ver el sitio hasta que deshabilite AdBlock.
El código es fácil de implementar, entre el <head> y </head> colocamos:
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 20%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: #121212;
z-index:1002;
overflow: auto;
}
.white_content p {
color: #FFF;
font-family: verdana;
}
</style>
Después de <body> colocamos:
<img src="banner.gif?" width="1" height="1" id="XcVCCW">
<div id="light" class="white_content">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="text-decoration:none;position:absolute;top:0px;left:0px;display:none;"><img src="closeX.png"></a>
<center>
<img src="noadblock.png"><br/>
<p>En este sitio no aceptamos el uso de AdBlock, tendrás que deshabilitarlo para ver el contenido.</p>
</center>
</div>
<div id="fade" class="black_overlay"></div>
<script type="text/javascript">
function cicklow_XcVCCW(){
if(document.getElementById("XcVCCW")==null || document.getElementById("XcVCCW").offsetHeight<=0){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
}
window.onload=cicklow_XcVCCW;
</script>
El código lo que hace es ver si la imagen (banner.gif) fue sacada de nuestro código, eso significa que tiene AdBlock activado (u otro script anti ads). Si detectamos que lo tiene activado mostramos el lightbox.
Si queremos permitirle al usuario cerrar la ventana del lightbox, solo tenemos que cambiar esto:
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="text-decoration:none;position:absolute;top:0px;left:0px;display:none;"><img src="closeX.png"></a>
por esto:
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="text-decoration:none;position:absolute;top:0px;left:0px;"><img src="closeX.png"></a>