Доброго времени суток 🙂
Далі потрібно додати код самого вікна. Забігаючи на перед, скажу, що код у звичайного віконця і у агресивного буде трохи відрізнятися. Справа в тому, що просте віконце по суті простий фіксований блок, а агресивне - перекриє весь контент сайту і не пустить відвідувача далі поки той не зробить певної дії, але про це трохи далі. А зараз просте віконце. У будь-якому місці шапки або підвалу, додаєте код самого віконця.
У нас є основний блок mdl_adb всередині якого і розміщуються всі елементи. У другому рядку розташовується кнопка закриття вікна. Якщо хочете змусити відвідувача відключити AdBlock і не давати йому можливості закрити віконце, то просто видаліть другий рядок повністю.
Далі додаємо вікна стилі. Їх потрібно додати в Ваш файл стилів.
- display: none; - Чи не показувати спочатку
- position: fixed; - фіксоване положення
- bottom: 10px; - відступ від низу вікна браузера
- left: 10px; - відступ від лівого краю вікна браузера
Так само в самому кінці стилів додана анімація - fadeIn. Час анімації - 0.4 секунди. Якщо хочете можете його міняти. У загальним міняти можете все як Вам завгодно, я даю просто заготовку.
На цьому, в принципі, можна поставити крапку. Вікно буде з'являтися постійно, при кожному оновленні сторінки, при включеному блокувальників типу - AdBlock.
Якщо Ви вже зовсім не хочете напружувати людей цим вікном і показувати його на першому плані. Щоб людина не бачив нічого крім нього поки не закриє або не відключить AdBlock, то потрібно зробити кілька кроків і доопрацювати наш код наданий вище.
Для початку змінитися трохи HTML код. Тобто код самого вікна. Нам потрібно укласти його в контейнер, ще в один блок. Даю відразу готовий код, щоб Ви нічого не наплутали, а потім не писали - НЕ ПРАЦЮЄ.
Як бачите код той же самий, просто він лежить всередині div з айди - mdl_ctnr. Природно трохи поміняються і стилі. Як і з кодом, викладаю відразу нові, щоб ви не наплутали.
Так як у нас тепер головним вважається не блок вікна, а контейнер, який перекриє весь сайт і в прикладі він напівпрозорий чорний, то в скрипті висновок вікна, теж потрібно змінити на новий айди.
Ну і щоб взагалі заборонити доступ до сайту, поки включений AdBlock, можете як і в першому прикладі в коді вікна прибрати вже третій рядок:
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце