Модальные окна fancybox
Исторически сложилось, что разные люди называют эти самые всплывашки абсолютно по-разному. Pop-up, модальные окна и до кучи AJAX-окна.
Но, предлагаю определится. То что мы сейчас будем делать - называется модальное окно. Pop-up - история про другое, это больше в сторону порно-баннеров. Если разобраться, то и AJAX вообще не про это, аякс вообще отдельно живущая технология, которая не имеет никакого отношения к нашим всплывашкам (практически никакого).
Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек. Можно делать их и вообще без JS, можно по-быстрому написать свою. Но нам же нужна современная, отлаженная, быстрая и легкая реализация модальных окон, верно? Да конечно верно, о чем разговор.
Установка fancybox 3
1. Качаем сам плагин отсюда: https://fancyapps.com/fancybox/3/ (кнопка Download)
2. У нас появится архив с кучей всего непонятного. Без паники, нам нужны в папке dist всего 2 файла:
3. После того как закинули файлы, самое время их подключить, на нужных страницах перед </body> вставляем:
<link rel='stylesheet prefetch' href='/css/jquery.fancybox.min.css'> <script src='/js/jquery.fancybox.min.js'></script>
Убедите также что подключена библиотека jQuery! Кстати, подключить по-быстрому ее можно так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
4. Да впринципе все, можем пользоваться 🙌
Делаем модальное окно на fancybox 3
<a data-fancybox data-src="#modal" href="javascript:;">Открыть окно</a> <div style="display: none;" id="modal"> <p>Здарова отец</p> </div>
Собственно что мы тут видим. В <a> у нас ссылочка при клике на которую будем открывать модальное окно с id #modal . И ниже - само модальное окно.
Также его можно вызывать из функции JS и генерировать контент прямо в скрипте:
$.fancybox.open('<div class="message"><h2>Здарова</h2><p>Отец</p></div>');Делаем увеличение картинки через fancybox 3
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Подпись к картинке">
<img src="thumbnail_1.jpg" alt="" />
</a>В href="" указываем ссылку на ту картинку, которая будет открывать при клике. В data-fancybox можно указать название галереи, что бы оно сгруппировалось в слайдшоу. И внутри всей ссылки у нас лежит картинка, можно и нужно там указывать уменьшенный вариант изображения.
Загружаем окно по AJAX
Вот тут есть небольшое пересечение с AJAX. Fancybox может загружать контент окна по ajax запросу, делается это так:
<a data-fancybox data-type="ajax" data-src="/ajax/ajax.php" data-filter="#two" href="javascript:;">
AJAX content
</a>Теперь при клике на кнопку, мы будем забирать ответ из файла ajax.php.
Можно также круто работать с фреймами и с видео. Больше настроек и опций тут.