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

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

В даному прикладі при створенні спливаючого вікна ми будемо використовувати розмітку html, css і js код. Спливаюче вікно буде з'являтися при кліці на посилання або кнопку, і закриватися при кліці по спеціальному тексту або клік за кордоном вікна.

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

За допомогою спливаючих вікон на сайті також дуже зручно і швидко можна збільшити кількість підписчиків. Наприклад якщо добре розкручений сайт приносив в день 10-15 підписчиків з якоїсь непомітної форми підписки, яка розміщувалася десь на сторінках сайту, то при підключенні спливаючого вікна цю кількість можна відразу множити на 100, 200 а іноді і більше відсотків.

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

Які переваги дають спливаючі вікна?

  • Основна мета спливаючого вікна це привернути увагу вашого відвідувача. При відвідуванні вашого сайту користувач відразу бачить спливаюче модальне вікно, в якому надана якась смакота, тобто якась корисна інформація яку ви ему пропонуєте.
  • Практика показує що використання спливаючих вікон позитивно впливає на конверсію сайту. Тим самим дозволяє збільшити відвідуваність сайту і кількість переглядів. Ви можете істотно поліпшити результат, отримати більше продажів, або підписчиків ніж від звичайного статичного блоку.
  • Спливаюче вікно дозволяє створити швидко зворотний зв'язок клієнта з вами, якщо в ньому ви розмістите форму контактів. Або ж ви можете розмістити в ньому відповіді на якісь популярні питання клієнтів, що дозволить вашому відвідувачеві вирішити швидше зв'язатися з вами.


Недоліки спливаючих вікон?

Є звичайно ж і недоліки від модальних спливаючих вікон, список основних недоліків розглянемо нижче:

  • Багатьох користувачів дратують спливаючі вікна, і вони йдуть з вашого сайту не ознайомившись навіть з основною інформацією, тим самим зменшують відвідуваність вашого ресурсу. Тому намагайтеся робити спливаючі вікна не нав'язливими, і рекомендовано щоб вони з'являлися з затримкою за часом. Також робіть їх акуратними і зручними, наприклад не потрібно робити вікно на всю сторінку сайту, інакше користувач просто не знайде потрібну кнопку закриття, і швидше за все піде до вашого конкурента.
  • Також не рекомендується вішати на сайт безліч різноманітних спливаючих вікон, так як це може розцінюватися як спам, в результаті чого репутація вашого інтернет ресурсу може різко впасти. Обов'язково прийміть цей факт до уваги.
  • З'явилося дуже багато блокувальників реклами, які встановлюються в браузері користувача, в такому випадку вашу рекламу відвідувач не побачить. Але не всі користуються даними плагінами і розширеннями, тому сильно засмучуватися не варто, але все ж якийсь відсоток відсівається.

Ну ось власне і все основні факти про використання спливаючих вікон на сайті.

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

Перше вам потрібно перевірити чи підключена у вас бібліотека jQuery, якщо немає то вам її потрібно підключити, наприклад так:

Додайте цей код десь між <head> ...</head>, якщо у вас бібліотека jQuery вже підключена, другий раз підключати її не потрібно.

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

Або подивитися живий приклад, ви можете у нас на сайті:


І так, для створення спливаючого вікна створюємо найпростішу html розмітку:
Після додаємо JS код на сторінку, або підключаємо його в окремому файлі:
Ну і останній пункт це стилі css для спливаючого вікна:
Ну ось власне і все що нам було потрібно для створення простого модального вікна при кліці.

Пробуйте і у вас все вийде, удачі вам в нашій нелегкій справі. :)

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

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

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

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

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