Как реализовать попап окна на сайте? обзор плагинов: magnific Popup и fancybox

Всем привет! В этой статье рассмотрим 2 популярных jquery плагина и научимся их подключать.

Будем рассматривать:

  • Magnific popup
  • Fancybox

MagnificPopup

Скачиваем с github исходники. Нам нужны 2 файла внутри папки dist:

jquery.magnific-popup.min.js
magnific-popup.css

Если используете gulp то через npm:

npm install magnific-popup

или через bower

bower install magnific-popup

Подключение плагина

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

Важно чтобы jquery.magnific-popup.js подключался после jquery.min.js, иначе плагин не заработает. Это также относится к другим jquery плагинам.

Тип контента — изображение (image)

HTML

<div class="wrap">
   <a href="https://mirpozitiva.ru/wp-content/uploads/2019/11/1472042585_06.jpg" class="item">
	<img src="https://mirpozitiva.ru/wp-content/uploads/2019/11/1472042585_06.jpg" alt="">
   </a>
</div>

CSS

.wrap {
  display: flex;
}

.item {
  display: block;
  max-width: 400px;
  margin-right: 5px;
}

.item img {
  height: 100%
}

Получился обычная ссылка изображений

Можно также добавить hover эффект для красоты. Про анимацию при наведении можете прочитать тут.

.wrap {
  display: flex;
}

.item {
  max-width: 400px;
  margin-right: 5px;
  position: relative;
  overflow: hidden;
}

.item img {
    height: 100%
}

.item::before {
  content: 'Увеличить';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  transition: 0.3s ease;
  transform: scale(0);
}

.item:hover::before {
  transform: none;
}

Теперь инициализируем скрипт

$(document).ready(function() {
    $('.item').magnificPopup({
        type: 'image',
    });
});

Здесь тип указываем изображение (image) и получаем

Document

Если хотим добавить анимацию то пишем внутри фигурных еще одну опцию. Также другие эффекты можете посмотреть перейдя по ссылке.

$(document).ready(function() {
    $('.item').magnificPopup({
        type: 'image',
        zoom: {
            enabled: true,    
        },
    });
});
Document

Также можно реализовать галерею. Пишем gallery: true и если будут несколько изображений то можно будет листать

$(document).ready(function() {
    $('.item').magnificPopup({
        type: 'image',
        zoom: {
            enabled: true,    
        },
        gallery: {
            enabled: true,
        }
    });
});
Document

Тип контента — содержимое (inline)

Этот тип используется если необходимо сделать модальное окно формы или оповещение. Для этого создадим блок с классом modal который будет всплывать. Также добавим ему класс mfp-hide чтобы блок изначально скрывался.

<div class="wrap">
   <a href="#modal" class="item">
	Открыть модальное окно
   </a>
</div>

<div class="modal mfp-hide" id="modal">
    <form>
        <input type="text" placeholder="Ваше имя">
        <input type="text" placeholder="Ваше телефон">
        <textarea placeholder="Сообщение"></textarea>
        <button class="send"></button>
    </form>
</div>

Пропишем стили. Для .modal задаем position: relative чтобы крестик не выходил за пределы блока. В остальном все думаю понятно.

.modal {
    background-color: #fff;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 30px 30px 30px;
    position: relative;
}

.modal textarea,
.modal input {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.modal .send {
    width: 100%;
    display: block;
}
 

Меняем type на inline и получаем такую всплывашку. Про анимации этого плагина я напишу отдельный пост. Пока двигаемся дальше.

$(document).ready(function() {
    $('.item').magnificPopup({
        type: 'inline',
    });
});
Document

Тип контента — iframe

Еще один тип которая позволяет открывать сайт в окне например youtube. В поле href пишем ссылку на ютуб видео

<div class="wrap">
   <a href="https://www.youtube.com/watch?v=aOP9v7CBQTI" class="item">
	Открыть видео
   </a>
</div>

type меняем на iframe

$(document).ready(function() {
    $('.item-inline-iframe').magnificPopup({
        type: 'iframe',
    });
});

Результат:

Тип контента — ajax

Тип ajax позволяет загружать страницу в попап окне асинхронно. Для этого нужно в поле href прописать ссылку на страницу которую хотим открыть и в конце добавить параметр ?tmpl=component

<a class="modal-ajax" href="https://blog.baukabdi.kz/archives/18?tmpl=component">Открыть страницу в окне ajax</a>

JS

$(document).ready(function() {
  $('.modal-ajax').magnificPopup({
    type: 'ajax'
 });
});

Результат:

Загрузить страницу в мод. окне Ajax

Fancybox

Рассмотрим следующий плагин. Называется fancybox. Тоже очень популярный среди разработчиков и похож на magnificPopup с некоторыми отличиями.

Ссылка на сайт https://fancyapps.com/fancybox/3/

Ссылка на GitHub https://github.com/fancyapps/fancybox

Через npm:

npm install @fancyapps/fancybox --save

Через bower

bower install fancybox --save

Подключение плагина

<!---- Подключаем файлы ---->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

Тип контента — изображение

В отличие от magnificPopup здесь есть два варианта инициализации попап-окна:

С помощью data атрибута: нужно просто прописать data-fancybox для ссылки

<div class="fancybox-wrap">
    <a href="https://mirpozitiva.ru/wp-content/uploads/2019/11/1472042585_08.jpg" class="fancybox-item" data-fancybox>
       <img src="https://mirpozitiva.ru/wp-content/uploads/2019/11/1472042585_08.jpg" alt="" />
    </a>
</div>

Или с помощью скрипта

$(document).ready(function() {
    $('.fancybox-item-js').fancybox();    
});

Весь список опции можете посмотреть на официальном сайте

Тип контента — видео

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

<div class="video__item">
    <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
        YouTube video
    </a>
</div>

<div class="video__item">
    <a data-fancybox href="https://vimeo.com/191947042">
        Vimeo video
    </a>
</div>

<div class="video__item">
    <a data-fancybox data-width="640" data-height="360" href="video.mp4">
        Direct link to MP4 video
    </a>
<div>

<div class="video__item">
    <a data-fancybox href="#myVideo">
        HTML5 video element
    </a>
<div>
    
<div class="video__item">
    <video width="640" height="320" controls id="myVideo" style="display:none;">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
        <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
        Your browser doesn't support HTML5 video tag.
    </video>
</div>
Direct link to MP4 video
HTML5 video element

Тип контента — iframe

Здесь анологично, только нужно прописать data-type=»iframe»

<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
    Sample PDF file 
</a>
Sample PDF file

Тип контента — inline

Здесь создаем блок который будет всплывать, зададим id и пропишем ему свойство display:none чтобы изначально скрывался.

А для ссылки в href укажем id блока который будет всплывать при нажатии

<div style="display: none;" id="hidden-content">
	<h2>Hello</h2>
	<p>You are awesome.</p>
</div>

<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Trigger the fancybox
</a>
Trigger the fancybox

Тип контента — ajax

Здесь все просто. Добавляем атрибут data-src где нужно прописать ссылку на контент и data-type=»ajax» чтобы контент загружался асинхронно в модальном окне.

<a data-fancybox data-type="ajax" data-src="https://blog.baukabdi.kz/archives/18" href="javascript:;">
   Открыть контент ajax
</a>
Открыть контент ajax

Также можем подгрузить только ту часть контента которая нам необходимо. Для этого добавляем атрибут data-filter. В значение пропишем id элемента которую хотим вызвать в модальном окне.

<a data-fancybox data-type="ajax" data-filter="#zoom-effect-anchor" data-src="https://blog.baukabdi.kz/archives/18" href="javascript:;">
   Открыть контент ajax
</a>
Открыть контент ajax

На этом все. Сегодня мы рассмотрели 2 самых популярных попап плагина. Конечно рассмотрели не все опции так как их множество. Думаю в будущем напишу про них отдельный пост. Думаю статья была полезным. Если возникли вопросы задавайте их в комментариях. Всем до скорого!

Один комментарий

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *