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