Спливаюче вікно при вході на сайт
Спливаюче вікно при вході на сайт
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

І так, дорогі друзі як ви вже зрозуміли з назви статті, сьогодні ми будемо говорити про те як додати на сайт спливаюче вікно яке буде з'являтися відразу ж як тільки користувач відкрив ваш сайт або потрібну вам сторінку.

Ви напевно вже не раз помічали даний функціонал який реалізований на багатьох сайтах, і виглядає все це дуже навіть симпатично.

Особисто я звичайно не дуже люблю використовувати всякі там вікна даного роду, але все таки іноді без спливаючого вікна на сайті не обійтися. Так як це дуже зручна можливість піднести вашому відвідувачеві важливу на вашу думку інформацію, про якусь знижку, акцію, новину, або ж просто про щось його повідомити або попередити!

Сьогодні ми розглянемо дуже ефективний і в той же час дуже простий метод виведення спливаючого вікна на сайті, при тому що при відкритті даного popup вікна задній фон сайту буде розмитим, для того що б сконцентрувати всю увагу користувача саме на необхідної інформації яку ви вкажете в даному спливаючому вікні.

Плюс ми додамо в це вікно живу кнопку при кліці на яку користувач потрапить на підготовлену вами заздалегідь сторінку, тим самим ми додамо нашому спливаючому вікну більшої інформативності, тобто зробимо її більш красивою і зрозумілою ....

 

Приклад того як буде виглядати це спливаюче вікно ви можете подивитися на фото нижче:

Ну або ж ви можете подивитися живий приклад спливаючого вікна у нас на сайті:

Ви можете завантажити готовий код скрипту спливаючого вікна по кнопці вище, ну а нижче ми розберемо сам скрипт і його додавання на ваш сайт.

І так приступимо до створення спливаючого вікна яке буде складатися з назви (заголовка вікна), і контейнера з вашим текстом а також кнопкою переходу на заздалегідь підготовлену вами сторінку, так само ми додамо ще звичайно і кнопку закриття вікна з невеликою анімацією.

Пункт перший:

Створюємо оболонку з HTML коду, в який ми помістимо елементи нашого вікна і укладемо все це в єдиний контейнер:

Ми додали заголовок спливаючого вікна, короткий текст, повний опис, а так само живу і реалістичну кнопку переходу на потрібну нам сторінку, яка буде оживати при наведенні на неї.



Пункт другий:

В даному пункті ми додамо до спливаючого вікна CSS стилі що б сформувати правильний і гарний вигляд для вікна. Сформуємо і визначимо параметри контейнера вікна, додамо заливку кольору, і додамо стиль кнопці. Так само ми тут додамо розмиття заднього фону вікна, для того що б привернути увагу відвідувача саме до інформації розташованої у вікні, що б не відволікати на все інше.

Пункт третій:

Останнім пунктом у нас буде підключення JS коду для можливості відображення вікна, а так само додамо можливість включення і відключення розмиття заднього фону.

Ну от як би і все, тепер у вас буде на сайті стильне сучасне а також адаптивне спливаюче вікно, користуйтеся на здоров'я!

 

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.