Пример:
Тут текст, который мы хотим показать только посетителям с отключенным AdBlock, например, текст статьи, кнопку скачать или информацию ниже.
HTML:
|
1 2 3 4 5 |
<div class="m-container"> <div id="reklama"> <p>Тут текст, который мы хотим показать только посетителям с отключенным <b>AdBlock</b>, например текст статьи или кнопку скачать.</p> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.m-container { position: relative; } .m-container:before { content: "Если вы видите данное сообщение, возможно у вас включен блокировщик рекламы AdBlock"; position: absolute; color: red; top: 0; left: 0; z-index: -1; } #reklama { background: #FFF; } |
Как это работает:
- Мы вкладываем нужный нам текст, блок, кнопку и т.д. в контейнер
m-container, псевдоэлементом которого будет показываться текст при включенном блокираторе (чтобы не писать лишний текст в HTML). - Делаем этот контейнер относительно, а текст абсолютно позиционируемым с отрицательным индексом по оси Z, чтобы он перекрывался информационным блоком, который мы и проверяем.
- Присваиваем этому блоку
id="reklama", который заблокирует AdBlockПроверялось на
id="reklama"30 января 2021 года на AdBlock и AdBlockPlus - Если наш блок заблокирован, то мы увидим текст предупреждения, который находится под ним
- Если не заблокирован, то он перекроет это предупредительное сообщение
Все почти верно, но нужно добавить к .m-container добавить z-index: 1;
.m-container { position: relative; z-index: 1; }Теперь все будет работать.