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 (в таком же порядке):
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 файлы размешены в соответственных папках для удобства.
Ниже приведены примеры создания модальных окон с анимацией появления.
See the Pen Magnific popup примеры с анимацией by webgrind (@webgrind) on CodePen.
Рассмотрим как использовать Magnific popup с анимацией на примере зума. Для этого потребуется:
1. Задать css стили для самого модального окна и для выбранной анимации.
style.css
1 2 3 4 5 6 |
.white-popup { position: relative; background: #FFF; padding: 25px; max-width: 400px; margin: 0 auto; } |
Стили для анимации зума:
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: 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
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».
1 2 3 4 |
<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> |
3. Добавить в js вызов попапа. Где «show-popup» — класс объекта по которому вызывается какой-либо попап. Также в 6 строке указывается откуда будет считываться выбранный тип анимации.
1 2 3 4 5 6 7 8 9 10 |
$('.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.