Спливаюче вікно на сайті (попап, модальне вікно)

Коли я тільки освоював ази розробки, спливаюче вікно я робив вручну. Так, так – замість того, щоб знайти якесь готове рішення, я займався цією невдячною справою 🤪. Мені здавалося, що особливо нічого складного в цьому немає. Але, тільки через якийсь час роботи над цим питанням, я почав усвідомлювати, що зробити це не так вже й просто. А вже в процесі використання, коли спливали всілякі незручні нюанси, мене це і зовсім починало засмучувати. Найцікавіше те, що готове рішення у мене було під рукою і я вже використовував його на тому ж сайті. І, як виявилося, використовував я його не повною мірою. Мені здавалося, що fancybox – це бібліотека виключно для відкриття зображень. Яке ж було моє здивування, що за допомогою неї можна було відкривати і відео, і текстові блоки, і google карту. Ось що буває, коли лінуєшся читати документацію 😅.

Власне, короткий огляд на цю бібліотеку я і хотів би тут зробити.

Знайомтеся – Fancybox

Fancybox. Що ж це таке і з чим його їдять? Одразу спойлер – його не їдять 🤡 . Fancybox – це одна з найпотужніших бібліотек, яка допомагає з мінімальними зусиллями зробити спливаюче вікно. Такої великої кількості вбудованих можливостей в інших бібліотеках я не зустрічав, у всякому разі. З основними перевагами плагіна можна ознайомитися тут: https://fancyapps.com/fancybox/#key-features . Особисто для себе я виділив:

• Він має велику кількість опцій, які допомагають налаштувати попап під будь-який дизайн.
• Можливість вбудовувати різні елементи: зображення, відео, карти, inline content, iframes та інший html контент.
• Наявність Jquery не обов’язкова.

Початок роботи

Підключити бібліотеку можемо використовуючи cdn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

Або можемо завантажити архів, де беремо файли з папки dist, розміщуємо їх у проєкті та підключаємо локально:

<link rel="stylesheet" href="fancybox.css" />
<script src="fancybox.umd.js"></script>

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

# Usage with NPM
$ npm install --save @fancyapps/ui

# and with Yarn
$ yarn add @fancyapps/ui

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

Запуск

Для початку створимо елемент, при кліці на який з’являтиметься спливаюче вікно. Нехай це буде посилання:

<a href="image-big.jpeg" data-fancybox>
  <img src="image.jpeg" />
</a>

У тезі <a> в атрибуті href поміщаємо посилання на зображення + додаємо атрибут data-fancybox

Додаємо Fancybox.bind() у файл зі скриптами, щоб усе запрацювало.

Для простого запуску цього більш ніж достатньо.

Також ми можемо об’єднувати наші елементи в галерею. Для цього в значенні атрибута data-fancybox додаємо назву галереї, за якою плагін групуватиме елементи. Наприклад data-fancybox="my-gallery"

<a href="image1-big.jpeg" data-fancybox="my-gallery">
  <img src="image1.jpeg" />
</a>

<a href="image2-big.jpeg" data-fancybox="my-gallery">
  <img src="image2.jpeg" />
</a>

Також за допомогою атрибута data-caption ми можемо додати до зображення невеликий опис:

<a href="image-big.jpeg" data-fancybox data-caption="Hello fancybox">
  <img src="image.jpeg" />
</a>

Не обов’язково використовувати тільки тег <a>. Можемо скористатися будь-яким іншим html елементом. Потрібно тільки додати йому атрибут data-fancybox і data-src c посиланням на зображення

Що ще можна запхати у спливаюче вікно?

Можемо відкрити google map:

• Відкриваємо google map;
• Знаходимо необхідний населений пункт;
• Копіюємо посилання браузера;
• Вставляємо його в href або в data-src елемента;

Map in modal

Можемо відкрити iframe:

• Вставляємо посилання в href або в data-src елемента;
• Додаємо до елемента атрибут data-type="iframe“

Iframe in modal

Video:

Тут можемо використовувати як просто посилання на файл, так і посилання на такі ресурси як Youtube.

• Вставляємо посилання в href або в data-src елемента;

Video in modal

Html блок:

• Для цього можемо приховати елемент на сторінці використовуючи css (display: none) і додати йому атрибут id, наприклад id="testPopup"
• Вставляємо цей id в href або в data-src елемента (#testPopup);

Html block in modal

І так, якщо ти відкрив попап вище, то ти помітив кнопку, натиснувши на яку можна закрити наше спливаюче вікно. Досить додати до цього елемента атрибут data-fancybox-close

Висновки

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