Всплывающее окно на сайте (попап, модальное окно)

Когда я только осваивал азы разработки, всплывающее окно я делал вручную. Да, да — вместо того, чтобы найти какое-то готовое решение, я занимался этим неблагодарным делом 🤪. Мне казалось, что особо ничего сложного в этом нет. Но, только спустя какое-то время работы над данным вопросом, я начал осознавать, что сделать это не так уж и просто. А уже в процессе использования, когда всплывали всякие неудобные нюансы, меня это и вовсе начинало расстраивать. Самое забавное то, что готовое решение у меня было под рукой и я уже использовал его на том же сайте. И, как оказалось, использовал я его не в полной мере. Мне казалось, что 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:

• Вставляем ccылку в href или в data-src элемента;
• Добавляем к элементу атрибут data-type="iframe"

Iframe in modal

Video:

Здесь можем использовать как просто ссылку на файл, так и ссылки на такие ресурсы как Youtube.

• Вставляем ccылку в 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

Выводы

Всё, что я показал выше — этого уже вполне достаточно, чтобы немного облегчить нелегкую долю разработчика. Однако, стоит иметь ввиду, что это всего лишь поверхностный взгляд на плагин. Он также имеет большое количество настраиваемых параметров, благодаря которым можно делать более гибкую и тонкую настройку контента. Так что продолжение следует…