Новости
- Типи модальних вікон
- Тип контенту - Image
- Галерея картинок - Gallery
- Тип контенту - Iframe
- Тип - Ajax
- Форма в модальному вікні
- Діалогові модальні вікна
- Опції плагіна
- mainClass
- removalDelay
- preloader
- closeBtnInside
- closeOnBgClick
- alignTop
- disableOn
Вітаю всіх відвідувачів мого блогу! Писати статті виходить дуже рідко, що не є добре. Уже боюся щось обіцяти, як раніше - писати буду частіше і все таке. Причина вся та ж - брак часу. Ну ладно, сьогоднішній пост не про це. Поговоримо про спливаючих вікнах для сайту. На просторах інтернету практично немає сайтів, які не використовують спливаючі (модальні) вікна. У зв'язку з цим я порахував, що дана тема для веб-розробника дуже важлива. Скриптів модальних вікон в мережі інтернет дуже багато. Який з них вибрати, щоб було простіше підключати, простіше користуватися, володів широкими можливостями і т.д.? Я для себе такий знайшов ...
структура статті
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 - вам не треба морочитися з підключенням, просто встановлюєте і активуєте плагін.
Для того, щоб Сача Magnific Popup переходимо на офіційний сайт розробника . Тиснемо на посилання "Build tool» і в модальному вікні вибираємо потрібні нам модулі. Після всього тиснемо «Generate build» і отримуємо код плагіна. Даний код необхідно скопіювати в редактор коду, наприклад, Notepade ++ або Sublime Text і зберегти з розширенням «.js«. Також в цьому ж вікні билда вам треба зберегти код CSS. Для цього клацаємо правом кнопкою миші по посиланню «CSS version» і зберігаємо файл стилів. Якщо ви користуєтеся препроцесором, то збережіть файл «Sass version«. Якщо не виходить зберегти перейдіть за посиланням збережіть код самостійно в редакторі коду.
Підключити плагін і почати працювати з ним досить просто. Взагалі на сайті є докладна документація , Правда вона англійською. Але я скажу вам - щоб займатися веб-розробкою вкрай важливо знати англійську мову на технічному рівні. Без цього нікуди. Для мене особисто не складає труднощів вивчити документацію по скриптам англійською мовою. Врешті-решт є також Гугл перекладач , Яким можна скористатися, якщо щось незрозуміло.
У даній статті я розгляну тільки ті моменти модальних вікон, з якими я розібрався і які активно впроваджую в процесі розробки сайтів. І так давайте почнемо.
Підключаємо файл плагіна і файл стилів Magnific Popup. Якщо у вас не підключена бібліотека jQuery, то обов'язково слід підключити і її. Загалом, тут підключення нічим не відрізняється від підключення будь-якого іншого скрипта jQuery. Про підключення стилів і скриптів я написав окрему статтю , Раджу її почитати.
<! - Magnific Popup core CSS file -> <link rel = "stylesheet" href = "/ css / magnific-popup.css"> <! - jQuery 1.7.2+ or Zepto.js 1.0+ -> <script src = "// ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </ script> <! - Magnific Popup core JS file -> <script src = "/js/jquery.magnific-popup.js"> </ script>Типи модальних вікон
Тип вмісту у вікні - Inline
Далі нам слід ініціювати наш плагін. Для цього нам потрібно визначитися з типом спливає контенту. Давайте викличемо в модальному вікні звичайний текст. Тоді код інціалізаціі буде для контенту з типом - Inline.
jQuery (document) .ready (function ($) {$ ( '. popup-content'). magnificPopup ({type: 'inline'});});Як бачимо подія виклику модального вікна вішається на об'єкт з класом «popup-content". Тому створимо його, наприклад, це буде посилання з якорем на викликається блок з id = "text-popup».
<a href="#text-popup" class="popup-content"> Викликати вікно з текстом </a> <div id = "text-popup" class = "white-popup mfp-hide"> <p> З іншого боку постійне інформаційно-пропагандистське забезпечення нашої діяльності дозволяє оцінити значення напрямків прогресивного розвитку. </ p> </ div>І ще дещо. Для того, щоб наше вікно стало видно нам необхідно в файл стилів «magnific-popup.css» додати наступний код:
.white-popup {position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; }Дане правило задає фоновий колір вікна і відступи. Їх спочатку його немає в файлі стилів, тому що саме вікно можна оформити на свій розсуд.
В результаті у нас відкривається модальне вікно з нашим текстом. Все досить просто.
Тип контенту - Image
Тепер давайте відкриємо картинки в модальних вікнах.
<! - Без анімації -> <p> <a class="image-popup" title="Ето опис ізображенія" href="images/images-magnific-popup/Img_1_b.jpg"> <img src = "images /images-magnific-popup/img_1_s.jpg "alt =" "/> </a> </ p> <! - З анімацією -> <p> <a class =" image-popup-zoom "title = "Це опис зображення з анімацією" href = "images / images-magnific-popup / Img_2_b.jpg"> <img src = "images / images-magnific-popup / img_2_s.jpg" alt = "" /> </a> </ p> // Type Image - картинка без анімації $ ( '. image-popup'). magnificPopup ({type: 'image'}); // Type Image Zoom - картинка з анімацією $ ( '. Image-popup-zoom'). MagnificPopup ({type: 'image', zoom: {enabled: true, duration: 300 // тривалість анімації. Не міняйте цей параметр також і в CSS}});Галерея картинок - Gallery
<Div class = "popup-gallery"> <a href="images/images-magnific-popup/gallery/img_1_b.jpg" rel="alternate"> <img src = "images / images-magnific-popup / gallery / img_1_s.jpg "alt =" "/> </a> <a href="images/images-magnific-popup/gallery/img_2_b.jpg" rel="alternate"> <img src =" images / images-magnific- popup / gallery / img_2_s.jpg "alt =" "/> </a> <a href="images/images-magnific-popup/gallery/img_3_b.jpg" rel="alternate"> <img src =" images / images-magnific-popup / gallery / img_3_s.jpg "alt =" "/> </a> <a href="images/images-magnific-popup/gallery/img_4_b.jpg" rel="alternate"> <img src = "images / images-magnific-popup / gallery / img_4_s.jpg" alt = "" /> </a> </ div>ініціалізація буде наступною:
// Тип Image - галерея картинок $ ( '. Popup-gallery'). MagnificPopup ({delegate: 'a', type: 'image', tLoading: 'Завантаження зображення #% curr% ...', gallery: {enabled : true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image}});Тип контенту - Iframe
Тепер давайте відкриємо в модальному вікні відео Youtube.
<a class="popup-youtube" rel="nofollow" href="http://www.youtube.com/watch?v=0O2aH4XLbto"> Відкрити відео Youtube </a>Код ініціалізації буде наступним:
// Type Iframe - відео Youtube (або Vimeo), карти Гугл або інший контент в iframe $ ( '. Popup-youtube'). MagnificPopup ({type: 'iframe'});Зауважте, що адреса відео береться з адресного рядка браузера, а не посилання поділитися в Youtube. Також, якщо ви знаєте, можна заборонити в кінці відео Youtube показ схожих відеороликів. Але для цього потрібно додати до адреси в коді iframe ролика параметр -? Rel = 0. Але як це зробити, адже ми копіюємо адресу з адресного рядка? Так скажу вам, що API Magnific Popup дозволяє нам налаштовувати код так, як нам потрібно. Я поколупався в документації і трохи доповнив код ініціалізації.
// Type Iframe - відео Youtube (або Vimeo), карти Гугл або інший контент в iframe $ ( '. Popup-youtube'). MagnificPopup ({type: 'iframe', iframe: {patterns: {youtube: {index: ' youtube.com/ ', // String that detects type of video (in this case YouTube). Simply via url.indexOf (index). id:' v = ', // String that splits URL in a two parts, second part should be% id% // Or null - full URL will be returned // Or a function that should return% id%, for example: // id: function (url) {return 'parsed id';} src: '/ /www.youtube.com/embed/%id%?autoplay=1&rel=0 '// Урл, який береться з коду iframe}}}});Виходячи з даного коду, видно, що ми створюємо свій шаблон відео Youtube. У параметрі «src» в кінці додаємо параметр «rel = 0» і все, тепер в кінці відеоролик збережено не буде схожих роликів. Можете розтринькати відео до кінця і подивитися.
Тип - Ajax
У модальних вікнах Magnific можна довантажувати контент асинхронно, за допомогою технології Ajax. Наприклад, на демо-сайті я завантажений сторінку будь-якої статті в модальному вікні. Демо-сайт працює на Joomla.
<a class="simple-ajax-popup" href="/novosti/5-novost-1.html?tmpl=component"> Завантажити сторінку в мод. вікні Ajax </a>Це звичайна посилання на сторінку статті. Це всього лише приклад і я ставлю адреса статті зі свого сайту. Щоб показати тільки контент, відкинувши непотрібні блоки (шапка сайту, сайдбар, підвал і т.д.) я додам в кінець адреси параметр -? Tmpl = component.
Код ініціалізації:
// Тип Ajax - завантаження контенту в модальному вікні $ ( '. Simple-ajax-popup'). MagnificPopup ({type: 'ajax'});Важливе зауваження! Завантаження контент повинен бути обгорнутий блоковими тегами так, щоб був тільки один кореневий елемент. Інакше, ваше вікно буде закриватися при натисканні в будь-який його частини.
Форма в модальному вікні
В даному випадку форма буде завантажуватися з типом контенту «inline«. В цьому випадку ви зможете запитати - а чим вона відрізняється від першого варіанту, де ми показували просто текст? Адже замість тесту ми можемо вставити код форми. Так, все правильно, замість тексту буде просто код форми з додатковою опцією в ініціалізації. Дана опція буде ставити фокус на певному полі при завантаженні форми. А це в свою чергу зручність. Особисто мені подобається, що при відкритті, скажімо, форми пошуку фокус відразу йде на поле введення ключового запиту.
// Форма в модальному вікні з фокусом на поле Ім'я $ ( '. Popup-with-form'). MagnificPopup ({type: 'inline', focus: '#name'}); <a href="#form-popup" class="popup-with-form"> Відкрити форму в модальному вікні </a> <div id = "form-popup" class = "white-popup mfp-hide"> < form action = "#"> <div> <input id = "name" class = "inputbox" type = "text" placeholder = "Ваше ім'я" /> </ div> <div> <input id = "email" class = "inputbox" type = "email" placeholder = "Ваше email" /> </ div> <div> <textarea name = "mess" id = "mess" class = "inputbox" cols = "30" rows = "10" placeholder = "Ваше повідомлення"> </ textarea> </ div> <div> <input type = "submit" value = "Відправити"> </ div> </ form> </ div>В даному випадку при відкритті форми фокус спрацьовує на поле з id = "name» - Ім'я.
Діалогові модальні вікна
Чим це вікно відрізняється від попередніх з типом inline? Практично нічим, за винятком того, що дане вікно не закривається при натисканні на затемненій області. Також прихована кнопочка з хрестиком. Для закриття ми буде використовувати інший об'єкт. Таким чином можна створювати діалогові вікна на сайті.
// Діалогове вікно $ ( '. Popup-modal'). MagnificPopup ({type: 'inline', preloader: false, modal: true}); $ (Document) .on ( 'click', '.popup-modal-dismiss', function (e) {e.preventDefault (); $ .magnificPopup.close ();});Тут, як бачимо, використовуються додаткові опції. Про деякі з них ми поговоримо нижче.
<a class="popup-modal" href="#test-modal"> Відкрити модальне вікно </a> <div id = "test-modal" class = "white-popup mfp-hide"> <p style = " text-align: right; "> <a class="popup-modal-dismiss" href="#"> Закрити </a> </ p> <h3> Діалогове вікно </ h3> <p> You will not be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions. </ p> </ div>Опції плагіна
Тепер давайте розглянемо деякі опції плагіна Magnific Popup.
mainClass
Тип - string (рядок)
За замовчуванням - empty
Даною опцією ми можемо поставити клас загальному батьківського блоку спливає контенту. Виходячи з цього ми можемо поставити своє оформлення конкретного вікна. Також клас присвоюється і блоку з затемненим фоном. Знову таки, можемо задати колір не чорний, а скажімо, білий. Тут вже ваш політ фантазії розширюється.
Також, відштовхуючись від присвоюється класу, ми можемо задавати різні ефекти спливання вікна. Робиться це все на CSS. Давайте задамо анімацію першому модальному вікна, розглянутого в даній статті вище. Це вікно з текстом.
Створимо окрему ініціалізацію з можливістю анімації.
// Модальне вікно з ефектом ZoomIn $ ( '. Popup-with-zoom-anim'). MagnificPopup ({type: 'inline', removalDelay: 300, mainClass: 'my-mfp-zoom-in'});Створимо правила анімації в CSS
/ ** * Fade-zoom animation for first dialog ** / / * start state * / .my-mfp-zoom-in .zoom-anim-dialog {opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-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); -moz-transform: scale (0.8); -ms-transform: scale (0.8); -o-transform: scale (0.8); transform: scale (0.8); } / * Animate in * / .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {opacity: 1; -webkit-transform: scale (1); -moz-transform: scale (1); -ms-transform: scale (1); -o-transform: scale (1); transform: scale (1); } / * Animate out * / .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {-webkit-transform: scale (0.8); -moz-transform: scale (0.8); -ms-transform: scale (0.8); -o-transform: scale (0.8); transform: scale (0.8); opacity: 0; } / * Dark overlay, start state * / .my-mfp-zoom-in.mfp-bg {opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } / * Animate in * / .my-mfp-zoom-in.mfp-ready.mfp-bg {opacity: 0.8; } / * Animate out * / .my-mfp-zoom-in.mfp-removing.mfp-bg {opacity: 0; } / ** * Fade-move animation for second dialog * / / * at start * / .my-mfp-slide-bottom .zoom-anim-dialog {opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translateY (-20px) perspective (600px) rotateX (10deg); -moz-transform: translateY (-20px) perspective (600px) rotateX (10deg); -ms-transform: translateY (-20px) perspective (600px) rotateX (10deg); -o-transform: translateY (-20px) perspective (600px) rotateX (10deg); transform: translateY (-20px) perspective (600px) rotateX (10deg); } / * Animate in * / .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {opacity: 1; -webkit-transform: translateY (0) perspective (600px) rotateX (0); -moz-transform: translateY (0) perspective (600px) rotateX (0); -ms-transform: translateY (0) perspective (600px) rotateX (0); -o-transform: translateY (0) perspective (600px) rotateX (0); transform: translateY (0) perspective (600px) rotateX (0); } / * Animate out * / .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {opacity: 0; -webkit-transform: translateY (-10px) perspective (600px) rotateX (10deg); -moz-transform: translateY (-10px) perspective (600px) rotateX (10deg); -ms-transform: translateY (-10px) perspective (600px) rotateX (10deg); -o-transform: translateY (-10px) perspective (600px) rotateX (10deg); transform: translateY (-10px) perspective (600px) rotateX (10deg); } / * Dark overlay, start state * / .my-mfp-slide-bottom.mfp-bg {opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } / * Animate in * / .my-mfp-slide-bottom.mfp-ready.mfp-bg {opacity: 0.8; } / * Animate out * / .my-mfp-slide-bottom.mfp-removing.mfp-bg {opacity: 0; } <P> <a class="popup-with-zoom-anim" href="#text-popup-anim"> Викликати вікно з текстом </a> </ p> <div id = "text-popup-anim "class =" zoom-anim-dialog white-popup mfp-hide "> <p> З іншого боку постійне інформаційно-пропагандистське забезпечення нашої діяльності дозволяє оцінити значення напрямків прогресивного розвитку. </ p> </ div>Якщо помітите в коді ініціалізації ми використовували додаткову опцію - removalDelay. Без цієї опції анімація спрацьовувати не буде.
removalDelay
Тип - integer
За замовчуванням - 0
Затримка видалення Popup з DOM. Значення відповідає мілісекунд.
preloader
Тип - boolean
За замовчуванням - true
Індикатор поточного стану. За замовчуванням при завантаженні контенту виводиться напис - Loading ... Якщо опція включена, вона завжди присутня в DOM, змінюється тільки текст всередині нього. Залежно від стану у блоку змінюється клас. В CSS ми можемо поставити різне оформлення. Ось список класів:
/ * Процес завантаження * / .mfp-s-loading {} / * Вдала завантаження * / .mfp-s-ready {} / * Завантаження з помилкою * / .mfp-s-error {}closeBtnInside
Тип - boolean
За замовчуванням - true
Якщо включено, скрипт додає кнопку з хрестиком в контейнер popup вікна. Якщо вам потрібно, щоб вона була за межами модального вікна, то досить передати значення - false
closeBtnInside: false
closeOnBgClick
Тип - boolean
За замовчуванням - true
Закриває модальне вікно при натисканні на затемненій області.
alignTop
Тип - boolean
За замовчуванням - false
Якщо включено, вирівнює вікно по верхньому краю, а не по центру. Вирівнювання працює за допомогою додавання класу - mfp-align-top.
disableOn
Тип - integer
За замовчуванням - null
Відключає дію, якщо максимальна ширина вікна браузера дорівнює заданому значенню. Може приймати і функцію, яка повинна повернути правду чи брехню.
disableOn: 768 або disableOn: function () {if ($ (window) .width () <600) {return false; } Return true; }Це далеко не всі опції плагіна. Я вибрав лише деякі з них, які сам використовую. Якщо брати все до уваги, то стаття вийде занадто великий. Ви можете розширити цей список самостійно, якщо заглянете в документацію на офіційному сайті.
Я сподіваюся ви зрозуміли які можливості Magnific Popup. Особисто я сам ще не всі можливості даного плагіна зазнав. Навіть зараз по ходу написання даної статті я відкрив для себе нові можливості Magnific.
Наостанок хочу дати вам посилання на Codepen автора з деякими прикладами Magnific Popap - http://codepen.io/collection/nLcqo/ . Все, на цьому і завершу.
Сподіваюся вам дана стаття стане в нагоді. Всім дякую за увагу. На зв'язку був Заур Магомедов. До зустрічі в наступних постах!
Перевірка орфографії
Com/watch?Але для цього потрібно додати до адреси в коді iframe ролика параметр -?
0. Але як це зробити, адже ми копіюємо адресу з адресного рядка?
Com/embed/%id%?
1.html?
В цьому випадку ви зможете запитати - а чим вона відрізняється від першого варіанту, де ми показували просто текст?