Главная
Web-дизайн
Всплывающее окно с просьбой отключить AdBlock

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

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

Доброго времени суток 🙂

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

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

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



Пример

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

<div class="no-adb">
//сюда код рекламы
</div>

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

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

У нас имеется основной блок 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;}       
}
 

Расписывать все построчно не буду. Статья рассчитана на людей, которые хоть немного, но знакомы с версткой и элементарными знаниями 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>  

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

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



Пример

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

<div id="mdl_ctnr">
<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>
</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;}       
}
 

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

В нашем 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>  

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

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

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

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

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




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

Опубликовано 7 комментариев

  • Vert
    Комментариев: 5

    На вашем сайте если отключить ADBlock табличка исчезает. Поставил на свой сайт и табличка видна все время. И пофиг что выключено или нет ))

  • Vert
    Комментариев: 5

    Если вставить между дивами ссылку и картинку вообще не работает.

    А если эту строку ставить так: табличка вылетает все время.

  • Vert
    Комментариев: 5

    У меня комменты HTML вырезают. Не могу показать.

  • Vert
    Комментариев: 5

    Разобрался.. Он нормально работает только с рекламой гугла. Если ваш блок рекламы вставлять то работает нормально. Если из этого кода что либо убрать перестает работать.

    Было бы не плохо, чтоб он срабатывал просто от наличия включенного ADBlock.
    А так получается что работает только с рекламой гугла.

    • Виталий
      Комментариев: 293

      Он вообще никак не привязан к рекламе гугл. Почти в самом низу есть скрипта есть строка:
      if (ad_nodes[i].offsetHeight == 0){
      Кстати, чтобы вставить код в комментарий нужно нажать кнопку - ДОБАВИТЬ КОД под формой ввода комментария и внутри появившихся тегов, добавить код.
      Так вот, главное значение там ==0 это означает РАВНО НУЛЮ. То есть, если высота рекламного блока равна нулю пикселей, срабатывает скрипт.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

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