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

Вітаю тебе шановний відвідувач на нашому сайті. У даній статті ми будемо вчиться додавати на сайт спливаюче вікно при кліці на кнопку.

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

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

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

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

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

Структура HTML вікна проста і складається з: .cd-popup-div, який містить спливаюче вікно, сам контейнер cd-popup, який є оболонкою вмісту вікна, невпорядкований список для двох викликів - Кнопок дій і тега прив'язки, який використовується для закриття спливаючого вікна.

Отже додаємо код з вмістом вікна:

А також виводимо на сторінці в потрібному місці кнопку виклику вікна:

Після нам потрібно підключити скрипти jQuery, на сторінку.

В першу чергу перевірте чи підключена у Вас на сайті бібліотека jQuery, в більшості сайтів вона вже додана але якщо ж у вас її немає додайте її десь перед тегом head:

Так само тепер там же підключіть скрипти спливаючого вікна:

Самі файли jQuery скриптів Ви можете завантажити під цією статтею.

Ну і останній крок - це CSS стилі нашого спливаючого вікна:

Підключіть їх на сайті в такий спосіб, знову десь над тегом head додайте такі рядки:

Основне, що б ми відзначили в CSS стилі - це відмінний перехід, коли модальне вікно стає видимим. Це досягається шляхом об'єднання властивостей видимості і непрозорості з переходом CSS3. Для обгортки вмісту вікна позиція за замовчуванням злегка зрушена вгору на початку transform: translateY (-40px) і змінена в кінці переходу на translateY (0).

Ну, а повний код CSS ви зможете вивчити скачавши даний скрипт під цією статтею.

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

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

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

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

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

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

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