Всплывающее окно с просьбой отключить AdBlock

15 февраля 2019 | Qudrat Qodirov | HTML + CSS Для сайта Полезное | 189

На сайте автора уже есть подобная статья – Вывод сообщения если посетитель использует Adblock. Данный материал мы будем применять и здесь, но немного усовершенствуем и доработаем его. Там сообщение выводилось вместо рекламного блока при включенном блокировщке рекламы, а здесь будет появляться модальное окно. Пример такого окошка можно увидеть и на моем сайте, если использовать блокировщик типа AdBlock.

Для начала предлагаю сделать просто окошко, как сделал я себе. Это не агрессивное окно, которое не препятствует просмотру сайта и не запрещает доступ к нему, если включена блокировка рекламы. И так, приступим.

Первым делом, вы будете должны заключить все рекламные блоки в спецблок с классом – no-adb. Это нужно сделать со всеми блоками. Если у Вас есть рекламный блок, который показывается на всех страницах сайта, то можно заключить только его.

<div class="no-adb">
//СЮДА КОД РЕКЛАМЫ
</div>

//СЮДА КОД РЕКЛАМЫ

</div>

“Под кодом рекламы, я я имею ввиду код от Google, Яндекса и других рекламных площадок. Если вы добавите в блок ссылку на картинку, на сайт или вообще внутреннюю ссылку – магии не будет. AdBlock не блокирует простые ссылки и картинки, просто подумайте немного. Если бы это было так, то вы бы вообще ничего не видели в интернете с включенным AdBlock.”

Далее нужно добавить код самого окна. Забегая на перед, скажу, что код у обычного окошка и у агрессивного будет немного отличаться. Дело в том, что простое окошко по сути простой фиксированный блок, а агрессивное – перекроет весь контент сайта и не пустит посетителя далее пока тот не совершит определенного действия, но об этом немного дальше. А сейчас простое окошко. В любом месте шапки или подвала, добавляете код самого окошка.

<div id="mdl_adb" class="fadeIn">
<span class="msg_close" onclick="document.getElementById('mdl_adb').style.display='none'; return false;">X</span>
<h3>Привет дорогой друг</h3> 
У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.
<a target="_blank" title="Как отключить Adblock и добавить сайт в белый список" href="http://gnatkovsky.com.ua/kak-dobavit-sajt-v-belyj-spisok-adblock.html">Инструкция как отключить AdBlock</a>
</div>

<h3>Привет дорогой друг</h3>

У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.

<a target="_blank" title="Как отключить Adblock и добавить сайт в белый список" href="http://gnatkovsky.com.ua/kak-dobavit-sajt-v-belyj-spisok-adblock.html">Инструкция как отключить AdBlock</a>

</div>

У нас имеется основной блок mdl_adb внутри которого и размещаются все элементы. Во второй строке располагается кнопка закрытия окна. Если хотите заставить посетителя отключить AdBlock и не давать ему возможности закрыть окошко, то попросту удалите вторую строку полностью.

Далее добавляем окну стили. Их нужно добавить в Ваш файл стилей.

#mdl_adb{
display:none;
position:fixed;
bottom:10px;
left:10px;
text-align:center;
font-size:16px;
line-height:16px;
background:#E92C32;
z-index:99;
width:300px;
padding:40px 10px 10px;
color:#fff;}
  
#mdl_adb h3{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}
 
#mdl_adb a{
color:#fff;
text-decoration:underline;
display:block;
padding:5px 0;
margin:10px 0;
font-weight:bold;}
 
.msg_close{
display:block;
position:absolute;
background:#292C33;
top:0;left:140px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.msg_close:hover{
background:#fc0;
color:#000;}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
     animation-duration: 0.4s; 
    -webkit-animation-duration: 0.4s;
     animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
     visibility: visible !important; 
}
  
@keyframes fadeIn {
    0% {transform: scale(0.7);opacity: 0.5;}
    80% {transform: scale(1.1);}       
    100% {transform: scale(1);opacity: 1;}       
}
  
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0.7);opacity: 0.5;}
    80% {-webkit-transform: scale(1.1);}       
    100% {-webkit-transform: scale(1);opacity: 1;}       
}

#mdl_adb{

display:none;

position:fixed;

bottom:10px;

left:10px;

text-align:center;

font-size:16px;

line-height:16px;

background:#E92C32;

z-index:99;

width:300px;

padding:40px 10px 10px;

color:#fff;}

#mdl_adb h3{

font-weight:bold;

font-size:20px;

margin-bottom:10px;

}

#mdl_adb a{

color:#fff;

text-decoration:underline;

display:block;

padding:5px 0;

margin:10px 0;

font-weight:bold;}

.msg_close{

display:block;

position:absolute;

background:#292C33;

top:0;left:140px;

line-height:25px;

font-weight:bold;

width:50px;

height:25px;

text-align:center;

color:#fff;

cursor:pointer;

-webkit-border-bottom-left-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

-moz-border-radius-bottomleft: 50px;

-moz-border-radius-bottomright: 50px;

border-bottom-left-radius: 50px;

border-bottom-right-radius: 50px;}

.msg_close:hover{

background:#fc0;

color:#000;}

.fadeIn{

animation-name: fadeIn;

-webkit-animation-name: fadeIn;

animation-duration: 0.4s;

-webkit-animation-duration: 0.4s;

animation-timing-function: ease-in-out;

-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;

}

@keyframes fadeIn {

0% {transform: scale(0.7);opacity: 0.5;}

80% {transform: scale(1.1);}

100% {transform: scale(1);opacity: 1;}

}

@-webkit-keyframes fadeIn {

0% {-webkit-transform: scale(0.7);opacity: 0.5;}

80% {-webkit-transform: scale(1.1);}

100% {-webkit-transform: scale(1);opacity: 1;}

}

Расписывать все построчно не буду. Статья рассчитана на людей, которые хоть немного, но знакомы с версткой и элементарными знаниями CSS. Важными являются тут первые 4 строки параметров основного блока:

display:none; – не показывать изначально
position:fixed; – фиксированное положение
bottom:10px; – отступ от низу окна браузера
left:10px; – отступ от левого края окна браузера

Так же в самом конце стилей добавлена анимация – fadeIn. Время анимации – 0.4 секунды. Если хотите можете его менять. В общим менять можете все как Вам угодно, я даю просто заготовку.

Теперь очередь самого главного пункта – скрипта, который выведет модальное окно. Он будет реагировать на блокировку рекламы и если блок с рекламой скрыт, появится окно. Это обычный javascript код. Добавлять его тоже нужно или в шапку или в подвал сайта. Можно рядом с кодом окна, можно поместить в отдельный файл и уже его подключить.

<script type="text/javascript">
var ads = "no-adb"
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);}
return results;}}
blocked = 0;
var ad_nodes = document.getElementsByClassName(ads);
for(i in ad_nodes){
if (ad_nodes[i].offsetHeight == 0){
blocked = 1;
document.getElementById('mdl_adb').style.display='block';}}}
</script>

var ads = "no-adb"

onload=function(){

if (document.getElementsByClassName == undefined) {

document.getElementsByClassName = function(className)

{

var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");

var allElements = document.getElementsByTagName("*");

var results = [];

var element;

for (var i = 0; (element = allElements[i]) != null; i++) {

var elementClass = element.className;

if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))

results.push(element);}

return results;}}

blocked = 0;

var ad_nodes = document.getElementsByClassName(ads);

for(i in ad_nodes){

if (ad_nodes[i].offsetHeight == 0){

blocked = 1;

document.getElementById('mdl_adb').style.display='block';}}}

</script>

На этом, в принципе, можно поставить точку. Окно будет появляться постоянно, при каждом обновлении страницы, при включенном блокировщике типа – AdBlock.

Если Вы уж совсем не хотите напрягать людей этим окном и показывать его на первом плане. Чтобы человек не видел ничего кроме него пока не закроет или не отключит AdBlock, то нужно сделать несколько шагов и доработать наш код предоставленный выше.

Для начала измениться немного HTML код. То есть код самого окна. Нам нужно заключить его в контейнер, еще в один блок. Даю сразу готовый код, чтобы Вы ничего не напутали, а потом не писали – НЕ РАБОТАЕТ!!!!

<div id="mdl_ctnr">
<div id="mdl_adb" class="fadeIn">
<span class="msg_close" onclick="document.getElementById('mdl_ctnr').style.display='none'; return false;">X</span>
<h3>Привет дорогой друг</h3> У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.
<a target="_blank" title="Как отключить Adblock и добавить сайт в белый список" href="http://gnatkovsky.com.ua/kak-dobavit-sajt-v-belyj-spisok-adblock.html">Инструкция как отключить AdBlock</a>
</div>
</div>

<h3>Привет дорогой друг</h3> У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.

</div>

Как видите код тот же самый, просто он лежит внутри div с айди – mdl_ctnr. Естественно немного поменяются и стили. Как и с кодом, выкладываю сразу новые, чтобы вы не напутали.

#mdl_ctnr{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
text-align: center}
 
#mdl_ctnr:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: '';}
 
 
#mdl_adb{
display: inline-block;
position: relative;
vertical-align: middle
text-align:center;
font-size:16px;
line-height:16px;
background:#E92C32;
z-index:9999;
width:300px;
padding:40px 10px 10px;
color:#fff;}
  
#mdl_adb h3{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}
 
#mdl_adb a{
color:#fff;
text-decoration:underline;
display:block;
padding:5px 0;
margin:10px 0;
font-weight:bold;}
 
.msg_close{
display:block;
position:absolute;
background:#292C33;
top:0;left:140px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.msg_close:hover{
background:#fc0;
color:#000;}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
     animation-duration: 0.4s; 
    -webkit-animation-duration: 0.4s;
     animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
     visibility: visible !important; 
}
  
@keyframes fadeIn {
    0% {transform: scale(0.7);opacity: 0.5;}
    80% {transform: scale(1.1);}       
    100% {transform: scale(1);opacity: 1;}       
}
  
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0.7);opacity: 0.5;}
    80% {-webkit-transform: scale(1.1);}       
    100% {-webkit-transform: scale(1);opacity: 1;}       
}

#mdl_ctnr{

display: none;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,.8);

text-align: center}

#mdl_ctnr:after {

display: inline-block;

height: 100%;

width: 0;

vertical-align: middle;

content: '';}

#mdl_adb{

display: inline-block;

position: relative;

vertical-align: middle

text-align:center;

font-size:16px;

line-height:16px;

background:#E92C32;

z-index:9999;

width:300px;

padding:40px 10px 10px;

color:#fff;}

#mdl_adb h3{

font-weight:bold;

font-size:20px;

margin-bottom:10px;

}

#mdl_adb a{

color:#fff;

text-decoration:underline;

display:block;

padding:5px 0;

margin:10px 0;

font-weight:bold;}

.msg_close{

display:block;

position:absolute;

background:#292C33;

top:0;left:140px;

line-height:25px;

font-weight:bold;

width:50px;

height:25px;

text-align:center;

color:#fff;

cursor:pointer;

-webkit-border-bottom-left-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

-moz-border-radius-bottomleft: 50px;

-moz-border-radius-bottomright: 50px;

border-bottom-left-radius: 50px;

border-bottom-right-radius: 50px;}

.msg_close:hover{

background:#fc0;

color:#000;}

.fadeIn{

animation-name: fadeIn;

-webkit-animation-name: fadeIn;

animation-duration: 0.4s;

-webkit-animation-duration: 0.4s;

animation-timing-function: ease-in-out;

-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;

}

@keyframes fadeIn {

0% {transform: scale(0.7);opacity: 0.5;}

80% {transform: scale(1.1);}

100% {transform: scale(1);opacity: 1;}

}

@-webkit-keyframes fadeIn {

0% {-webkit-transform: scale(0.7);opacity: 0.5;}

80% {-webkit-transform: scale(1.1);}

100% {-webkit-transform: scale(1);opacity: 1;}

}

Так как у нас теперь главным считается не блок окна, а контейнер, который перекроет весь сайт и в примере он полупрозрачный черный, то в скрипте вывод окна, тоже нужно сменить на новый айди.

В нашем javascript в последней строке – document.getElementById(‘mdl_adb’), нужно mdl_adbпоменять на mdl_ctnr. Готовый код будет таким:

<script type="text/javascript">
var ads = "no-adb"
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);}
return results;}}
blocked = 0;
var ad_nodes = document.getElementsByClassName(ads);
for(i in ad_nodes){
if (ad_nodes[i].offsetHeight == 0){
blocked = 1;
document.getElementById('mdl_ctnr').style.display='block';}}}
</script>

var ads = "no-adb"

onload=function(){

if (document.getElementsByClassName == undefined) {

document.getElementsByClassName = function(className)

{

var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");

var allElements = document.getElementsByTagName("*");

var results = [];

var element;

for (var i = 0; (element = allElements[i]) != null; i++) {

var elementClass = element.className;

if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))

results.push(element);}

return results;}}

blocked = 0;

var ad_nodes = document.getElementsByClassName(ads);

for(i in ad_nodes){

if (ad_nodes[i].offsetHeight == 0){

blocked = 1;

document.getElementById('mdl_ctnr').style.display='block';}}}

</script>

Ну и чтобы вообще запретить доступ к сайту, пока включен AdBlock, можете как и в первом примере в коде окна убрать уже третью строку:

<span class="msg_close" onclick="document.getElementById('mdl_ctnr').style.display='none'; return false;">X</span>

1	<span class="msg_close" onclick="document.getElementById('mdl_ctnr').style.display='none'; return false;">X</span>

Удаляете ее и кнопка закрытия пропадет, если хотите уберите и ее стили, чтобы зря не занимали место. Возможность закрыть окно пропадет и человек должен будет принять решение – отключить блокировщик рекламы или покинуть сайт. Конечно особо хитрый сможет через файрбаг отключить окно и добраться до информации, но при переходе на другую страницу, окно вновь появится и ему придется опять все делать заново.

Если Вы считает, что Вашему сайту нет пользы от посетителей, которым тяжело увидеть один рекламный ненавязчивый блок, то данный метод для Вас.

На этом все, спасибо за внимание. !

Обсуждение закрыто.