Настройка всплывающих окон 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.jscommon.js (в таком же порядке):

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

Примеры

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

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

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

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

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

style.css

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

 

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

index.html

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

 

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

common.js

 

Галлерея

 

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

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