Новости

Створюємо спливаючі вікна для сайту

  1. Типи модальних вікон
  2. Тип контенту - Image
  3. Галерея картинок - Gallery
  4. Тип контенту - Iframe
  5. Тип - Ajax
  6. Форма в модальному вікні
  7. Діалогові модальні вікна
  8. Опції плагіна
  9. mainClass
  10. removalDelay
  11. preloader
  12. closeBtnInside
  13. closeOnBgClick
  14. alignTop
  15. disableOn

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

структура статті

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

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

Ось основні переваги плагіна, які я можу виділити від себе:

  1. Легкість і модульність. Мінімізована версія скрипта з усіма включеними модулями важить всього лише ~ 20 кб. В процесі компіляції (про це поговоримо трохи нижче) ви можете вибрати тільки ті модулі, які вам потрібні. Модулі це типи спливаючих вікон:
    • Inline - звичайні блокові вікна, що містять будь-який контент;
    • Image - спливання зображень;
    • Ajax - подгрузка даних у вікні за допомогою технології Ajax;
    • Iframe - подгрузка даних вікна в Iframe, наприклад, відео Youtube;
    • Gallery - по суті Image, але з можливістю перегортати фото за допомогою стрілок, тобто мінігалерея;
    • High-DPI (retina) - тільки для типу Image. Даний модуль дозволяє показувати зображення з високою роздільною здатністю на пристроях з дисплеями різною щільністю пікселів. Чесно кажучи, з цим я не розібрався, так що особливо нічого сказати з даного приводу. Треба буде виділити час і розібратися.
    • Image zoom animation - анімація при Спливання зображення. Якщо кому не потрібна анімація можна не включати даний модуль в пакет.
  2. Розмір вікна можна задати засобами CSS, не через JavaSript, як це зроблено в багатьох інших скриптах. Взагалі я скажу, що через CSS можна налаштовувати зовнішній вигляд вікна на свій розсуд, хоча і вид за замовчуванням мене влаштовує більше ніж ...
  3. Підтримка адаптивності. Наприклад, ми можемо відключити спливання вікна після певного розміру вікна браузера. Я вважаю це просто чудова опція. По суті, навіщо збільшувати зображення на мобільній версії, адже зображення тож підлаштовується максимально під розмір екрану пристрою.
  4. Гнучка настройка. Наприклад, ми можемо поміняти анімацію спливання, передавши свій клас через параметри (опція mainClass нижче). Далі для даного класу описуємо анімацію правилами CSS (а це якраз те, про що я говорив, коли мав на увазі, що через CSS можна гнучко налаштовувати спливаючі вікна). Приблизно, як це може виглядати ви можете подивитися тут .
  5. Conditional lightbox - опція, яка дозволяє визначити вільний простір для спливання вікна. Тобто якщо місце є, то спрацює лайтбокс. Скрипт автоматично визначає розмір екрану. Чесно сказати дану опцію я в документації поки не знайшов і не тестував ще. Але автор заявляє, що така можливість є.
  6. Пошаговость відкриття модальних вікон - ви можете відкривати вікна покроково, наприклад, 2 вікна. дивіться приклад і все зрозумієте.
  7. Є плагін для 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?
В цьому випадку ви зможете запитати - а чим вона відрізняється від першого варіанту, де ми показували просто текст?

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация:

Все права защищены © 2013 Производственная компания El.Od
Промышленное производство рыбной продукции