Доброго вам дня. 🙂
З одного боку, такі вікна іноді напружують відвідувачів, але з іншого боку інакше. Вони не погано виконують свою роботу. Якщо Ви таким способом залучаєте людей в групу, то приплив передплатників явно збільшитися. Може при першому заході людина і закриє вікно, відхиливши пропозицію, але якщо Ваш сайт і інформація на ньому цікава йому, то з великою ймовірністю він все таки вступить в групу, якщо Ви активно її ведете, щоб стежити за новинами.
У цій статті хочу Вам розповісти як раз про спосіб, як можна організувати таке спливаюче вікно. Якщо вставити код вікна тільки на головній, то вікно буде з'являтися, на головній, коли її відвідують відвідувачі. Якщо розмістити в підвалі або шапці, то вікно буде спливати на будь-якій сторінці сайту. На жаль цей спосіб не використовує кукі, так що воно буде з'являтися з затримкою кожен раз для всіх.
Насамперед нам треба встановити скрипт, який і робить висновок. Для цього потрібно вставити його або в підвал або в шапку вашого сайту. Сам скрипт виглядає так.
Скрипт просто надає властивість display: block; вікна, якому ми в стилях пропишемо властивість display: none ;. У другому рядку видно значення 5000. Це значення в мілісекундах і дорівнює 5 секундам. Це час через яке з'явиться вікно, так що міняйте його на число побільше або поменше, по потребі. З скриптом зрозуміло, далі саме вікно.
1. Html розмітка.
Вікно буде з'являтися по центру екрана, а весь інший контент буде затемнити. Для цього ми створимо основний блок з id bg_popup. який займе всю ширину і висоту екрану і затемнить основний вміст. До того ж він буде саме тим блоком з яким працює скрипт. Усередині цього блоку розмістимо блок з id popup. який якраз і буде вікном.
Далі всередину можна додати все що потрібно. Щоб мати можливість закрити вікно, так само раджу додати обов'язкову кнопку, в якій прописаний параметр onclick. що повертає нашому вікна властивість display: none; і воно зникає.
1. CSS стилі.
Як завжди, щоб все впорядкувати і задати коректний вид, прописуємо стилі для кожного з блоків, а також кнопці закрити.
Більше не потрібно вводити. Якщо все зроблено правильно, вікно стане з'являтися при кожному завантаженні сторінки. Сподіваюся цей спосіб Вам допоможе і Ви вирішите ту задачу, яка стала перед Вами.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Спасибі дорогий друг. Виручив.
За допомогою цього скрипта виводжу форму підписки
Привіт, Спасибо большое за скрипт! Хотів ще дізнатися чи можна зробити так, щоб він показувався тільки в певні години?
Де початок спрацьовування 8 ранку а кінець 18 вечора - задається в 5 рядку.
Віталій! Вітаю! Прошу вибачення за тупе питання, тільки почав освоювати HTML і CSS. HTML розмітку і CSS стилі, які ви описали в статті, потрібно помістити на одній сторінці або потрібно створити окремий документ для CSS? Дякуємо.
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце