Настройка всплывающих окон Magnific popup с примерами

Magnific popup удобная и гибкая библиотека всплывающих окон (popup). Несмотря на простоту в использовании, вы сразу создаете адаптивные всплывающие окна, отлично работающие как на больших мониторах, так и на мобильных.

Подключение

Скачиваем с git Magnific popup архив с необходимыми js и css файлами. Нам нужны: dist/jquery.magnific-popup.min.js и dist/magnific-popup.css.

В шапке (<header>) подключаем magnific-popup.css и собственный, перед закрытием <body> подключаем js файлы jquery-3.2.1.min.js(скачать), jquery.magnific-popup.min.js, common.js (в таком же порядке):

<html>
<head>
  <!-- .... -->

  <link href="css/magnific-popup.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
 <!-- .... -->

  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/common.js"></script>
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

Обратите внимание js и css файлы размешены в соответственных папках для удобства.

Примеры

Ниже приведены примеры создания модальных окон с анимацией появления.

See the Pen Magnific popup примеры с анимацией by webgrind (@webgrind) on CodePen.

Как использовать

Рассмотрим как использовать Magnific popup с анимацией на примере зума. Для этого потребуется:

1. Задать css стили для самого модального окна и для выбранной анимации.

style.css

.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  max-width: 400px;
  margin: 0 auto; }

.white-popup {

position: relative;

background: #FFF;

padding: 25px;

max-width: 400px;

margin: 0 auto; }

Стили для анимации зума:

/* ZOOM */

.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8); }

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); }

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8; }

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  opacity: 0; }

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0; }

/* ZOOM */

.mfp-zoom-in .mfp-with-anim {

opacity: 0;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

-webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8); }

.mfp-zoom-in.mfp-bg {

opacity: 0;

-webkit-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out; }

.mfp-zoom-in.mfp-ready .mfp-with-anim {

opacity: 1;

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1); }

.mfp-zoom-in.mfp-ready.mfp-bg {

opacity: 0.8; }

.mfp-zoom-in.mfp-removing .mfp-with-anim {

-webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8);

opacity: 0; }

.mfp-zoom-in.mfp-removing.mfp-bg {

opacity: 0; }

2. Добавить блок модального окна в html (для удобства в конец <body> перед подключением js файлов).

index.html

<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">
    <h2>Zoom popup</h2>
    <img src="https://webgrind.ru/wp-content/uploads/2018/09/cat.jpg" alt="">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti itaque ipsam illum eaque, odio cumque quam asperiores dolores labore ab.</p>
</div>

<h2>Zoom popup</h2>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti itaque ipsam illum eaque, odio cumque quam asperiores dolores labore ab.</p>

</div>

Где в id вы указываете уникальное имя попапа. Т.е если вам нужно 2 разных, то добавляете 2 блока с разными id и каждый вызываете со своим значением href. В data-effect указываем необходимый тип анимации. Для зума это «mfp-zoom-in».

<ul>
    <li><a href="#test-popup" class="show-popup" data-effect="mfp-zoom-in">Зум</a></li>
    <li><a href="#another-popup" class="show-popup" data-effect="mfp-zoom-in">Газета</a></li>
</ul>

<ul>

<li><a href="#another-popup" class="show-popup" data-effect="mfp-zoom-in">Газета</a></li>

</ul>

3. Добавить в js вызов попапа. Где «show-popup» — класс объекта по которому вызывается какой-либо попап. Также в 6 строке указывается откуда будет считываться выбранный тип анимации.

common.js

$('.show-popup').magnificPopup({
    type: 'inline',
    removalDelay: 500, //delay removal by X to allow out-animation
    callbacks: {
        beforeOpen: function () {
            this.st.mainClass = this.st.el.attr('data-effect');
        }
    },
    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

$('.show-popup').magnificPopup({

type: 'inline',

removalDelay: 500, //delay removal by X to allow out-animation

callbacks: {

beforeOpen: function () {

this.st.mainClass = this.st.el.attr('data-effect');

}

midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.

});

Галлерея

See the Pen Magnific popup галерея by webgrind (@webgrind) on CodePen.

Возможно, вам будет интересно:

Вставка изображений с помощью img и через css

19.01.2018

Многоуровневое выпадающее меню

27.09.2018