Создаем всплывающие окна для сайта

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

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


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

style.css

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

1 2 3 4 5 6

.white-popup{

positionrelative;

background#FFF;

padding25px;

max-width400px;

marginauto;}

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

/* 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; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/* ZOOM */  

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

opacity;

-webkit-transitionall0.2sease-in-out;

-o-transitionall0.2sease-in-out;

transitionall0.2sease-in-out;

-webkit-transformscale(0.8);

-ms-transformscale(0.8);

transformscale(0.8);}

.mfp-zoom-in.mfp-bg{

opacity;

-webkit-transitionall0.3sease-out;

-o-transitionall0.3sease-out;

transitionall0.3sease-out;}

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

opacity1;

-webkit-transformscale(1);

-ms-transformscale(1);

transformscale(1);}

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

opacity0.8;}

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

-webkit-transformscale(0.8);

-ms-transformscale(0.8);

transformscale(0.8);

opacity;}

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

opacity;}

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>

1 2 3 4 5

<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>

Где в 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>

1 2 3 4

<ul>

<li><ahref=»#test-popup»class=»show-popup»data-effect=»mfp-zoom-in»>Зум<a><li>

<li><ahref=»#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. });

1 2 3 4 5 6 7 8 9 10

$(‘.show-popup’).magnificPopup({

type’inline’,

removalDelay500,//delay removal by X to allow out-animation

callbacks{

beforeOpenfunction(){

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

}

},

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

});

Создаем всплывающие окна для сайта — Magnific Popup

Приветствую всех посетителей моего блога! Писать статьи получается очень редко, что не есть хорошо. Уже боюсь что-то обещать, как раньше — писать буду чаще и все такое. Причина вся та же — нехватка времени. Ну ладно, сегодняшний пост не об этом. Поговорим о всплывающих окнах для сайта. На просторах интернета практически нет сайтов, которые не используют всплывающие (модальные) окна. В связи с этим я посчитал, что данная тема для веб-разработчика очень важна. Скриптов модальных окон в сети интернет очень много. Какой из них выбрать, чтобы было проще подключать, проще пользоваться, обладал широкими возможностями и т.д.? Я для себя такой нашел…

Magnific Popup — jQuery плагин всплывающих окон, сделанный с акцентом на производительность и удобство пользования. Так кратко описывает автор скрипта — Дмитрий Семенов и я с ним абсолютно согласен. Я уже достаточно долго использую Magnific Popap для модальных окон и успел в этом убедиться.

Вообще хотелось бы отметить, что Magnific очень популярен, как в рунете, так и в буржуйнете, не смотря на то, что разработчик русскоговорящий. В общем, Magnific Popup заслужил то, чтобы я про него написал отдельный пост.

Вот основные преимущества плагина, которые я могу выделить от себя:

Легкость и модульность. Минимизированная версия скрипта со всеми включенными модулями весит всего лишь

20 кб. В процессе компиляции (об этом поговорим чуть ниже) вы можете выбрать только те модули, которые вам нужны. Модули это типы всплываемых окон:

  • Inline — обычные блочные окна, содержащие любой контент;
  • Image — всплывание изображений;
  • Ajax — подгрузка данных в окне посредством технологии Ajax;
  • Iframe — подгрузка данных окна в Iframe, например, видео Youtube;
  • Gallery — по сути Image, но с возможностью листать фото с помощью стрелок, т.е. минигалерея;
  • High-DPI (retina) — только для типа Image. Данный модуль позволяет показывать изображения с высоким разрешением на устройствах с дисплеями разной плотностью пикселей. Честно говоря, с этим я не разобрался, так что особо нечего сказать по данному поводу. Надо будет выделить время и разобраться.
  • Image zoom animation — анимация при всплывании изображения. Если кому не нужна анимация можно не включать данный модуль в пакет.

Размер окна можно задать средствами CSS, не через JavaSript, как это сделано во многих других скриптах. Вообще я скажу, что через CSS можно настраивать внешний вид окна на свое усмотрение, хотя и вид по умолчанию меня устраивает более чем…

Поддержка адаптивности. Например, мы можем отключить всплывание окна после определенного размера окна браузера. Я считаю это просто замечательная опция. По сути, зачем увеличивать изображение на мобильной версии, ведь изображение итак подстраивается максимально под размер экрана устройства.

Гибкая настройка. Например, мы можем поменять анимацию всплывания, передав свой класс через параметры (опция mainClass ниже). Далее для данного класса описываем анимацию правилами CSS (а это как раз то, о чем я говорил, когда имел ввиду, что через CSS можно гибко настраивать всплывающие окна). Примерно, как это может выглядеть вы можете посмотреть здесь.

Conditional lightbox — опция, которая позволяет определить свободное пространство для всплывания окна. Т.е. если место имеется, то сработает лайтбокс. Скрипт автоматически определяет размер экрана. Честно сказать данную опцию я в документации пока не нашел и не тестировал еще. Но автор заявляет, что такая возможность есть.

Пошаговость открытия модальных окон — вы можете открывать окна пошагово, например, 2 окна. Смотрите пример и все поймете.

Имеется плагин для WordPress — вам не надо заморачиваться с подключением, просто устанавливаете и активируете плагин.

Content Types

By default, Magnific Popup has four types of content: , , , and . There is no any “auto-detection” of type based on URL, so you should define it manually.


The type of a popup can be defined in a two ways:

  1. Using the option. E.g.: .

  2. Using the CSS class (where is the desired content type). For example: , .

The second option always overrides the first, so you may initialize popups with multiple content types from one call.

is the default content type (from v0.8.4), so you may skip its definition.

The source of the the popup content (for example, a path to an image, a path to an HTML file, a path to a video page) can be defined in a few ways:

Method #1: From the attribute:

Method #2: From the attribute (overrides the first method):

Method #3: From the option

If you want to modify how the source is parsed, you may hook into the callback. For example:

Inline Type

To create popup from inline element you need to:

1) Create a HTML element that you wish to display in popup and add it somewhere. Class is required to hide the popup from the page.

2) Style this element. Magnific Popup by default doesn’t apply any styles to it, except vertical centering (if ). Close button will be automatically appended inside (if ).

3) Add button that will open the popup (source must match CSS id of an element ( in our case).

4) Initialize script.

Here are some other ways to initialize popup:

I have created two examples on CodePen that will help you better understand how it works:

  • Simple inline popup
  • Advanced popup with markup and gallery mode

Options

Options should be passed to the initialization code and separated by comma, e.g.:

Options for specific modules are explained in their sections of documentation (e.g. related to text are in , related to gallery are in . Here you can find the list of general options:

disableOn

If window width is less than the number in this option lightbox will not be opened and the default behavior of the element will be triggered. Set to to disable behavior. Option works only when you initialize Magnific Popup from DOM element.

Can also accept Function as a parameter, which should return if lightbox can be opened and otherwise. For example:

key

“Key” option is a unique identifier of a single or a group of popups with the same structure. If you will not define it, DOM elements will be created and destroyed each time when you open and close popup.

You may (and should) set an equal key to different popups if their markup matches. By markup I mean options that change HTML structure of the popup (e.g. close icon placement and HTML code of it).

For example: you have many popups that show title, some text and button — you may use one key for all of them, so only one instance of this element is created. Same for popup that always contains image and caption.

You can delete cached templates like so:

midClick

If set to lightbox is opened if the user clicked on the middle mouse button, or click with Command/Ctrl key. Option works only when you initialize Magnific Popup from DOM element.

mainClass

String that contains classes that will be added to the root element of popup wrapper and to dark overlay. For example , can also contain multiple classes — .

preloader

Preloader in Magnific Popup is used as an indicator of current status. If option enabled, it’s always present in DOM only text inside of it changes. Below you can see explanation of CSS names that are applied to container that holds preloader and content area depending on the state of current item:

For example, if you want your error message to be in red add such CSS:

You can trigger change of status manually by calling .

focus

String with CSS selector of an element inside popup that should be focused. Ideally it should be the first element of popup that can be focused. For example or . Leave empty to focus the popup itself.

closeBtnInside

If enabled, Magnific Popup will put close button inside content of popup, and wrapper will get class (which in default CSS file makes color of it change). If markup of popup item is defined element with class it will be replaced with this button, otherwise close button will be appended directly.

modal

When set to , the popup will have a modal-like behavior: it won’t be possible to dismiss it by usual means (close button, escape key, or clicking in the overlay).

This is a shortcut to set , , , and to .

alignTop

If set to popup is aligned to top instead of to center. (basically all this option does is adds CSS class to popup which removes styles that align popup to center).

fixedContentPos

Popup content position. Can be , or . If set to — fixed position will be used, to — absolute position based on current scroll. If set to popup will automatically disable this option when browser doesn’t support fixed position properly.

fixedBgPos

Same as an option above, but it defines position property of the dark transluscent overlay. If set to — huge tall overlay will be generated that equals height of window to emulate fixed position. It’s recommended to set this option to if you animate this dark overlay and content is most likely will not be zoomed, as size of it will be much smaller.

overflowY

Defines scrollbar of the popup, works as overflow-y CSS property — any CSS acceptable value is allowed (e.g. , , ). Option is applied only when fixed position is enabled.

There is no option , but you may easily emulate it just via CSS.

prependTo


The DOM element to which popup will be added. Useful when you’re using ASP.NET where popup should be inside . Option available since 2013/12/04.

autoFocusLast

If set to last focused element before popup showup will be focused after popup close. Option available since 2015/12/16.

What makes this plugin different?

Light and modular

You can choose to include only the features that you need using the or by compiling it yourself with Grunt.js. Size of core JS file is about 3KB + each module weighs about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you’re not obligated to use it.

Content is resized with CSS

The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not — feel free to use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.

Fast

Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

High-DPI (Retina) display support

Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.

Conditional lightbox

Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Brad Frost has a terrific article about this technique.

Memory management

Popup has an extendable micro templating engine that reuses existing DOM elements (example), which is especially useful when your popups same pattern.

Initializing popup

Popup initialization code should be executed after document ready, for example:

There are three ways to initialize a popup:

2. From a group of elements with one parent

Same as first one, but use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup. If you wish to enable gallery, add the option.

3. From the ‘items’ option

The option defines data for the popup item(s) and makes Magnific Popup ignore all attributes on the target DOM element. The value for can be a single object or an array of objects.

Play with this example on CodePen.

Examples

Single image lightbox

Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner.

Lightbox gallery

You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine, or new PhotoSwipe script.

Zoom-gallery

If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.

Popup with video or map

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

Open YouTube videoOpen Vimeo videoOpen Google Map

Dialog with CSS animation

Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen.

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Ajax popup

You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window — whatever.

Load content via ajaxLoad another content via ajax

Modal popup

A modal popup disables the usual ways to close popups.

Modal dialog

You won’t be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.

Error handling

This is just basic example of how error messages are displayed. Surely, you can change text or style them.

Broken imageBroken ajax request

Don’t forget to check out my new article about this plugin on the Smashing Magazine.

Подключение Magnific Popup

Подключить плагин и начать работать с ним достаточно просто. Вообще на сайте есть подробная документация, правда она на английском

Но я скажу вам — чтобы заниматься веб-разработкой крайне важно знать английский язык на техническом уровне. Без этого никуда

Для меня лично не составляет труда изучить документацию по скриптам на английском языке. В конце концов есть также гугл переводчик, которым можно воспользоваться, если что-то непонятно.

В данной статье я рассмотрю только те моменты модальных окон, с которыми я разобрался и которые активно внедряю в процессе разработки сайтов. И так давайте начнем.

Подключаем файл плагина и файл стилей Magnific Popup. Если у вас не подключена библиотека jQuery, то обязательно следует подключить и ее. В общем, здесь подключение ничем не отличается от подключения любого другого скрипта jQuery. Про подключение стилей и скриптов я написал отдельную статью, советую ее почитать.

Подключение

Скачиваем с 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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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>

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

Gallery

The gallery module allows you to switch the content of the popup and adds navigation arrows. It can switch and mix any types of content, not just images. Gallery options:

Example:

Multiple galleries

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each separate gallery. For example

You don’t necessarily need to use option, it can be just .

Lazy-loading

Lazy-loading option preloads nearby items. It accepts an array with two integers. The first is the number of items to preload before the current. The second is the number of images to preload after the current. For example, will load 3 next items and 1 that is before current. These values are automatically switched based on direction of movement.

By default all what it does is just searches for an image tag and preloads it with JavaScript. But you can extend it and do your custom preloading logic with help of event, like so:


“Preload” option can be changed dynamically. To disable it set .

API

There is a much bigger list of public events, methods and variables than provided here which is used for module development, look inside code or type in console to find them, if you think that something should be added to docs — please submit commit.

Events

You can define callbacks in option. Besides that, all Magnific Popup events are also dispatched using on target element (or to document if the element doesn’t exist).

List of callbacks. In each callback is , so you can execute methods () or access public variables ().

Public methods

You may also call ANY method via after you initialized the popup, for example:

You may also open the popup directly at initialization:

8 ответов

7

Если ваш фрагмент находится в главном js, всплывающая кнопка ajax не может быть привязана к событию. Я представляю два решения:

Или так: (проверено)

добавить эту функцию в свой основной js

И используйте эту кнопку в своем всплывающем html

Iframe:

Если ваша кнопка находится в iframe и magnificpopup script в главном окне в том же домене, вы можете получить доступ к указанной выше функции следующим образом:

19 фев. 2015, в 13:52 Поделиться 4

попробуйте это

05 дек. 2016, в 11:14 Поделиться 1

Кажется, что появляется ошибка при увеличении. Чтобы использовать кнопку внутри контейнера, вы должны поставить fixedContentPos: true;

Следующий код, похоже, работает для меня отлично. Надеюсь, что это поможет.

01 май 2015, в 02:26 Поделиться 1

Вам нужно добавить внутренние всплывающие параметры .

01 апр. 2015, в 07:06 Поделиться

Самый простой способ — добавить к вашему классу класс «mfp-close», что-то вроде этого:

    <a href="#" title="Close" type="button" class="btn btn-default mfp-close">Close</a>

Здесь классы Bootstrap также используются для того, чтобы ссылка выглядела как кнопка — не имеет значения.

06 окт. 2017, в 11:17 Поделиться

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

Надеюсь, это поможет!

19 апр. 2017, в 17:38 Поделиться

1. Решение

Методы ниже не имеют сокращенных имен, таких как «открытые» и «закрытые».

Они должны быть вызваны через объект «экземпляр». «instance» доступен только тогда, когда было открыто хотя бы одно всплывающее окно. Например: $. MagnificPopup.instance.doSomething();

здесь пример индивидуального закрытия для magnificPopup

//сохранять экземпляр magnificPopup в переменной

//открыть масштабный экземпляр

//Закрытие всплывающего окна, которое в настоящее время открыто

//Навигация при включенной галерее

//обновляет всплывающее содержимое. Полезно после изменения «элементов»

2. Решение

вы можете добавить кнопку во всплывающем окне и назначить функцию в событии клика, например:

Если всплывающее окно запускается через событие onClick, то тот же объект jQuery может быть использован для закрытия этого всплывающего окна

удачи:)

28 нояб. 2015, в 00:33 Поделиться .

$magnificPopup.close(); .. будет работать, если вы поместите его в свой контент, загруженный с помощью ajax

17 июнь 2015, в 10:21 Поделиться


С этим читают