Найти в Дзене

Делаем popup правильно - FancyBox 4

Исторически сложилось, что разные люди называют эти самые всплывашки абсолютно по-разному. Pop-up, модальные окна и до кучи AJAX-окна.
Но, предлагаю определится. То что мы сейчас будем делать - называется модальное окно. Pop-up - история про другое, это больше в сторону порно-баннеров. Если разобраться, то и AJAX вообще не про это, аякс вообще отдельно живущая технология, которая не имеет никакого отношения к нашим всплывашкам (практически никакого). Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек. Можно делать их и вообще без JS, можно по-быстрому написать свою. Но нам же нужна современная, отлаженная, быстрая и легкая реализация модальных окон, верно? Да конечно верно, о чем разговор. Установка FancyBox 4 1. Ставить будем без всяких скачиваний, будущее за CDN. Для подключения нам потребуется всего 2 строчки кода:
Это пихаем в <head>: Это пихаем в <body>: 2. Да все, работаем! Итак, что умеет делать наш фенсибокс 🔎Увеличивать картинки К
Оглавление

Исторически сложилось, что разные люди называют эти самые всплывашки абсолютно по-разному. Pop-up, модальные окна и до кучи AJAX-окна.

Но, предлагаю определится. То что мы сейчас будем делать - называется
модальное окно. Pop-up - история про другое, это больше в сторону порно-баннеров. Если разобраться, то и AJAX вообще не про это, аякс вообще отдельно живущая технология, которая не имеет никакого отношения к нашим всплывашкам (практически никакого).

Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек. Можно делать их и вообще без JS, можно по-быстрому написать свою. Но нам же нужна современная, отлаженная, быстрая и легкая реализация модальных окон, верно? Да конечно верно, о чем разговор.

Установка FancyBox 4

1. Ставить будем без всяких скачиваний, будущее за CDN. Для подключения нам потребуется всего 2 строчки кода:

Это пихаем в <head>:

Это пихаем в <body>:

2. Да все, работаем!

Итак, что умеет делать наш фенсибокс

🔎Увеличивать картинки

Кстати, если для каждой картинки присвоить одинаковый data-атрибут data-fancybox="название", то получится галерея.

🪟Создавать модалки

Но я предпочитаю вызывать их программно, через JS

🌄Открывать видосы

Больше настроек и опций тут.

Скоро расскажу как делать модалки своими руками, без всяких фенсибоксов, мам пап и кредитов 😀

Подписывайтесь, впереди много интересного!

#html #веб разработка #javascript #popup