Javascript модальне вікно для фотографії. Створюємо адаптивне модальне вікно jquery
У статті про створення модального вікна на css ми розібрали що таке модальне вікно і навіщо воно потрібне. А так же створили вікно використовуючи тільки css. У цій статті я опишу як створити модальне вікно javascript. А конкретніше ми будемо для створення використовувати бібліотеку jquery.
І так почнемо створювати модальне вікно на jquery. Для ускладнення завдання поставимо таку умову. Нам потрібно буде створити адаптивне модальне вікно. А адаптивність буде полягати в тому, що вікно при зменшенні розміру екрану той же буде зменшуватися. Адаптивне модальне вікно jquery почнемо створювати з html розмітки.
Замовити дзвінок
З кодом я думаю все зрозуміло. Маємо оболочку.wraper, де знаходиться контент нашого сайту. Є кнопка виклику модального вікна з ідентіфікаторм gowindow, саме вікно з ід modal_window і перекриває шар myoverlay. Напишемо тепер css стилі.
Wraper (width: 100%; margin: auto; width: auto; / * той же що і 100% * / max-width: 960px; / * максимальна ширина обгортки * / border: 1px solid # 000; background-color: # F5F9FB;) .button (/ * ------- * /) #modal_window (width: 34%; / * для адаптивності * / height: 300px; border-radius: 10px; border: 3px #fff solid; background : # e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; / * повна прозорість для анімації * / z-index: 5000; / * вікно повинно бути верхнім шаром * / padding-top: 20px; text-align: center; position: relative;) #modal_window #window_close (width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; ) #myoverlay (z-index: 3000; / * вище всіх шарів але нижче вікна * / position: fixed; / * для перекриття сайту * / background-color: # 000; opacity: 0.5; width: 100%; height: 100 %; / * повністю на екран * / top: 0; left: 0; cursor: pointer; display: none;)
Наведемо css код. Блок.wraper задаємо адаптивним, він змінюється від розміру екрана але не більше 960px. Код кнопки показувати не буду. Ширину вікна #modal_window задаємо в процентах, ширина буде залежати від шіріни.wraper. Для центрування вікна задаємо марджін 33%. Він розраховується так 50% -17%, де 17% половина ширини вікна. Приховуємо вікно властивостями display: none і opacity: 0. З кодом #window_close і #myoverlay я думаю все ясно. Давайте тепер напишемо код для jquery. Будемо вважати що jqery вже підключена.
$ (Document) .ready (function () ($ ( "# gowindow"). Click (function () (// клік по кнопці $ ( "# myoverlay"). FadeIn (400, // показуємо перекриває шар function () ($ ( "# modal_window") .css ( "display", "block") // робимо вікно відімим.animate ((opacity: 1, top: "50%"), 200); // збільшуємо прозорість, вікно плавно з'їжджає));)); / * прибираємо вікно * / $ ( "# window_close, #myoverlay"). click (function () (// натискання по перекриває шару або хреста $ ( "# modal_window") .animate ((opacity : 0, top: "45%"), 200, // вкл прозорість, вікно йде вгору function () ($ (this) .css ( "display", "none"); // робимо вікно невидимим $ ( "# myoverlay "). fadeOut (400); // прибираємо шар перекриття));));));
Js код я думаю в поясненні не потребує, так як я його досить добре прокоментував. На цьому я думаю все, так що підведемо підсумки. Ми зробили просте адаптивне модальне вікно jquery
модальне вікно - це контейнер, який при натисканні посилання спливає і надає будь-яку інформацію. Думаю багато хто вже знайомі з ним, ну а якщо ні подивіться демо версію, щоб зрозуміти що це таке. Зараз їх налічується безліч і кожен працює по своєму. Наприклад, є абсолютно стандартні, які запитують виконати будь то дія, в даному прикладі підтвердження. Або наприклад, інший варіант, при першому заході на сайт, яке актуально буде підходити під різні підписки на групи в соціальних мережах. є модальні вікна на чистому CSS, Ну мені хотілося б відвести цю частку JavaScript, Так як на ньому це більш цікавіше виходить і не погано працює у всіх браузерах.
КРОК ПЕРШИЙ.Код JavaScript.
Щоб запустити модальне вікно, потрібно передати функції значення window.onload. В якому ми будемо передавати два елементи ідентифікатора " a"І" b".
// передача елементів по id "a" і "b" window.onload \u003d function () (a \u003d document.getElementById ( "a"); b \u003d document.getElementById ( "b");)
Потім ми прописуємо функцію " showA", Яка буде показувати модальне вікно і передавати елементами" a"І" b"Стилі, а саме ми задали прозорість, ширину і блокування вікна, якщо не була натиснута посилання" відкрити".
// показуємо вікно функції "showA" function showA () (// Задаємо прозорість і блокуємо дисплей // елементу "b" b.style.filter \u003d "alpha (opacity \u003d 80)"; b.style.opacity \u003d 0.8; b .style.display \u003d "block"; // Задаємо блокіроваку і відступ зверху в 200px // елементу "a" a.style.display \u003d "block"; a.style.top \u003d "200px";)
Після відкриття модального вікна, нам потрібно як то його потім закрити або приховати, для цього прописуємо функцію " hideA", Яка буде приховувати модальне вікно і прописуємо їй стилі для елементів" a"І" b".
// Викликаємо функцію "hideA", яка буде приховувати // вікно для елементів "a" і "b" function hideA () (b.style.display \u003d "none"; a.style.display \u003d "none";)
Повний код.
КРОК ДРУГИЙ. Код HTML.
відкрити
У тезі "Div"вказуємо ідентифікатор " a", Який буде взаємодіяти зі стилями CSSі з кодом JavaScript. Далі прописуємо ще один тег " div"І надаємо йому ідентифікатор" windows", Який буде виконувати роль розмітки усередині контейнера модального вікна.
Усередині вказуємо посилання, яка буде " закривати"Модальне вікно, також надаємо їй стиль" pages"І за замовчуванням задаємо їй стиль" float: right", Тобто будемо відображати посилання закриття модального вікна у верхньому правому куті.
Прописуємо ідентифікатор " b", Який буде приховувати вікно.
Повний код.
відкрити
КРОК ТРЕТІЙ.Код CSS.
обов'язкові стилі CSS, Без яких модальне вікно буде не правильно працювати, а точніше взагалі не функціонувати належним чином і відображати інформацію.
І так перший обов'язковий стиль, що стосується позиції, в даному прикладі це fixed. Він дозволяє відображати модальне вікно, при цьому обмежуючи його з кордоном заливки. За допомогою z-index ми вказуємо наскільки модальне вікно ідентифікується після натисканні посилання " відкрити", а також " закрити". Також display: none, Який дозволяє приховувати модальне вікно до натискання посилання.
#b (position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; background: grey; z-index: 1;) #a (border: 1px solid black; position: fixed ; background: # eff7ff; z-index: 3; display: none;) #windows (padding: 5px; width: 500px; height: 300px; border: 2px solid blue;) a.pages (background: # 97cdff; color: white; padding: 4px; text-decoration: none;) a: hover.pages (background: red; color: white; padding: 4px; text-decoration: none;)
Всім величезне спасибі за Вашу увагу!
3. Приклад модального вікна jQuery, викликаного по посиланню (з Демо)
Швидше за все Ви вже не раз бачили в інтернеті спливаюче модальне вікно - підтвердження реєстрації, попередження, довідкова інформація, завантаження файлу і багато іншого. У цьому уроці я запропоную кілька прикладів зі створення найпростіших модальних вікон.
Створюємо просте спливаюче модальне вікно
Приступимо до розгляду коду найпростішого модального вікна, яке буде одразу з'являтисяjQuery код
Код вставляєте в будь-яке місце в body Вашої сторінки. Відразу після завантаження сторінки, без будь-яких команд, Ви побачите вікно наступного вигляду:
А ось наступний код буде виконуватися після завантаження всієї сторінки в браузер. У нашому прикладі після завантаження сторінки із зображеннями вискочить просте спливаючі віконце:
Виклик модального вікна jQuery по посиланню з CSS
Наступним кроком буде створення модального вікна при натисканні на посилання. Фон при цьому буде повільно затемнюватися.
Часто можете бачити, що форма входу і реєстрації знаходяться саме в таких вікнах. Приступимо до справи
Для початку напишемо html-частина. Цей код розміщуємо в body Вашого документа.
Виклик модального вікна
код CSS. Або в окремому css-файлі, або в
У коді jQuery основну увагу приділимо позиції модального вікна і масці, в нашому випадку поступового затемнення фону.
Увага! Не забуваємо підключити бібліотеку в head документа!
Підключення бібліотеки з сайту Google. Ну і безпосередньо сам код jQuery.
код jQuery
В черговий раз звертаюся до теми створення модальних (спливаючих) вікон. Останнім часом мене все більше цікавлять, різні техніки виконання спливаючих вікон, без використання javascript, плагінів jQuery і т.д. Більший інтерес викликає можливість застосування чистих стилів і невичерпного потенціалу нових функцій.
Грунтуючись на розробках деяких шановних буржуинов, вони в цьому плані хлопці спритні, виходять непогані результати, в плані створення модальних вікон за допомогою CSS3. Завдання, в першу чергу полягає в тому, щоб домогтися більш-менш стійкою кросбраузерності кінцевого результату, ну і звичайно ж, з найменшими втратами, зменшити загальну кількість коду, як в HTML так і в CSS, щоб полегшити життя багатостраждальним трудівникам сайтобудування.
Що виходить в результаті, у мене в цьому плані на сьогоднішній день, ми з вами і подивимося, а заодно, і навчимося робити спливаючі модальні вікна за допомогою «магії» CSS3.
Оновлене: 27.10.2017
Для початку, все ті кого зацікавила ця тема, можете поглянути на приклад роботи модальних вікон в різних варіантах і завантажити вихідні:
Не варто сприймати цей урок, як керівництво до дії, так як на цьому етапі вдалося здобути впевнену підтримки лише сучасними браузерами ( IE 9 +, Firefox, Safari, Opera, Chrome). З оглядкою на те, що стародавні версії браузера IE ще досить популярний серед користувачів, рекомендую розглядати цю статтю у вигляді якогось експерименту, демонстрації можливостей CSS3.
Добре, тепер перейдемо безпосередньо до самої розкладці html коду і стильового формування нашого модального вікна за допомогою css3)))
Крок 1. HTML
По-перше, давайте створимо основну розмітку HTML. Як ви можете бачити, базова конструкція досить проста, якщо розглядати саме html-розмітку модальних вікон і кнопок (посилань), для їх активації. Кожне модальное віконце, вдає із себе ніщо інше, як стандартний контейнер
| < a href= "#win1" class = "button button-green" > Відкрити вікно 1 < a href= "#win2" class = "button button-red" > Відкрити вікно 2 < a href= "#win3" class = "button button-blue" > Відео у вікні 3 < a href= "#win4" class = "button button-orange" > Фото у вікні 4 < a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "Закрити" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" > Тут ви можете розмістити будь-який зміст, текст з картинками або відео!< a class = "close" title= "Закрити" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2> Заголовок Тут вставляєте відео своє або з будь-якого стороннього ресурсу, YouTube, Vimeo і т. Д. (Iframe, embed) ...< a class = "close" title= "Закрити" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "Ваша-картінка.jpg" alt \u003d "" /\u003e< a class = "close" title= "Закрити" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "Ваша-картінка.jpg" alt \u003d "" /\u003e< a class = "close" title= "Закрити" href= "#close" > |
Відкрити вікно 1 відкрити вікно 2 Відео у вікні 3 Фото у вікні 4
Заголовок
Тут вставляєте відео своє або з будь-якого стороннього ресурсу, YouTube, Vimeo і т.д. (iframe, embed) ...
У наведеному вище прикладі коду, для наочності, в контейнерах модальних вікон прописав короткі пояснення. Вам залишається за аналогією, в div-контейнер спливаючого вікна, помістити будь-яке своє утримання, будь то простий текст, картинки або відео з будь-якого стороннього ресурсу, YouTube, Vimeo і т.д. Посилання на виклик модальних вікон, можете зробити текстовими, або ж оформити їх у вигляді, як в прикладі.
Крок 2. CSS
Наступний крок, це найцікавіше, важливо підготувати всі необхідні стилі, для нашого модального вікна, оформити зовнішній вигляд і додати функціоналу. Базові стилі сторінки я опустив, щоб не вносити сум'яття, а деякі правила, для більшої ясності, розбавив коментарями:
| / * Базові стилі шару затемнення і модального вікна * / . overlay (top: 0; right: 0; bottom: 0; left: 0; z- index: 10; display: none; / * Фон затемнення * / background- color: rgba (0, 0, 0, 0.65); position: fixed; / * Фіксоване поцізіонірованіе * / cursor: default; / * Тип Курсара * /) / * Активуємо шар затемнення * / . overlay: target (display: block;) / * Стилі модального вікна * / . popup (top: - 100%; right: 0; left: 50%; font- size: 14px; z- index: 20; margin: 0; width: 85%; min- width: 320px; max- width: 600px; / * Фіксоване позиціонування, вікно стабільно при прокручуванні * / position: fixed; padding: 15px; border: 1px solid # 383838; background: #fefefe; / * Обрізка кутів * / - webkit- border- radius: 4px; - moz- border- radius: 4px; - ms- border- radius: 4px; border- radius: 4px; font: 14px / 18px "Tahoma", Arial, sans- serif; / * Зовнішня тінь * / - webkit- box- shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - moz- box- shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - ms- box- shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); box- shadow: 0 15px 20px rgba (0, 0, 0, .22), 0 19px 60px rgba (0, 0, 0, .3); - webkit- transform: translate (- 50%, - 500%); - ms- transform: translate (- 50%, - 500%); - o- transform: translate (- 50%, - 500%); transform: translate (- 50%, - 500%); - webkit- transition: - webkit- transform 0. 6s ease- out; - moz- transition: - moz- transform 0. 6s ease- out; - o- transition: - o- transform 0. 6s ease- out; transition: transform 0. 6s ease- out; ) / * Активуємо модальний блок * / . overlay: target +. popup (- webkit- transform: translate (- 50%, 0); - ms- transform: translate (- 50%, 0); - o- transform: translate (- 50%, 0); transform: translate (- 50 %, 0); top: 20%;) / * Формуємо кнопку закриття * / . close (top: - 10px; right: - 10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #ccc; - webkit- border- radius: 15px; - moz- border- radius : 15px; - ms- border- radius: 15px; - o- border- radius: 15px; border- radius: 15px; background- color: rgba (61, 61, 61, 0.8); - webkit- box- shadow: 0px 0px 10px # 000; - moz- box- shadow: 0px 0px 10px # 000; box- shadow: 0px 0px 10px # 000; text- align: center; text- decoration: none; font: 13px / 20px "Tahoma", Arial , sans- serif; font- weight: bold; - webkit- transition: all ease. 8s; - moz- transition: all ease. 8s; - ms- transition: all ease. 8s; - o- transition: all ease. 8s ; transition: all ease. 8s;). close: before (color: rgba (255, 255, 255, 0.9); content: "X"; text- shadow: 0 - 1px rgba (0, 0, 0, 0.9); font- size: 12px;). close: hover (background- color: rgba (252, 20, 0, 0.8); - webkit- transform: rotate (360deg); - moz- transform: rotate (360deg); - ms- transform: rotate (360deg); - o- transform: rotate (360deg); transform: rotate (360deg);) / * Зображення всередині вікна * / . popup img (width: 100%; height: auto;) / * Мініатюри зліва / справа * / . pic- left,. pic- right (width: 25%; height: auto;). pic- left (float: left; margin: 5px 15px 5px 0;). pic- right (float: right; margin: 5px 0 5px 15px;) / * Елементи м-медіа, фрейми * / . popup embed,. popup iframe (top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; min- width: 320px; max- width: 600px; width: 100%;). popup h2 (/ * заголовок 2 * / margin: 0; color: # 008000; padding: 5px 0px 10px; text- align: left; text- shadow: 1px 1px 3px #adadad; font- weight: 500; font- size: 1. 4em; font- family: "Tahoma", Arial, sans- serif; line- height: 1.3;) / * параграфи * /. popup p (margin: 0; padding: 5px 0) |
/ * Базові стилі шару затемнення і модального вікна * / .overlay (top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; / * фон затемнення * / background-color: rgba (0, 0, 0, 0.65); position: fixed; / * фіксоване поцізіонірованіе * / cursor: default; / * тип Курсара * /) / * активуємо шар затемнення * / .overlay: target (display: block;) / * стилі модального вікна * / .popup (top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px ; max-width: 600px; / * фіксоване позиціонування, вікно стабільно при прокручуванні * / position: fixed; padding: 15px; border: 1px solid # 383838; background: #fefefe; / * обрізка кутів * / -webkit-border-radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px / 18px "Tahoma", Arial, sans-serif; / * зовнішня тінь * / -webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0,0 , 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-transform: translate (-50%, -500%); -ms-transform: translate (-50%, -500%); -o-transform: translate (-50%, -500%); transform: translate (-50%, -500%); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; ) / * Активуємо модальний блок * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: translate ( -50%, 0); transform: translate (-50%, 0); top: 20%;) / * формуємо кнопку закриття * / .close (top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius : 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: center; text-decoration: none; font: 13px / 20px "Tahoma", Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s;) .close: before (color: rgba ( 255, 255, 255, 0. 9); content: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px; ) .Close: hover (background-color: rgba (252, 20, 0, 0.8); -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); -ms-transform: rotate (360deg) ; -o-transform: rotate (360deg); transform: rotate (360deg);) / * зображення всередині вікна * / .popup img (width: 100%; height: auto;) / * мініатюри зліва / справа * / .pic -left, .pic-right (width: 25%; height: auto;) .pic-left (float: left; margin: 5px 15px 5px 0;) .pic-right (float: right; margin: 5px 0 5px 15px ;) / * елементи м-медіа, фрейми * / .popup embed, .popup iframe (top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h2 (/ * заголовок 2 * / margin: 0; color: # 008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3;) / * параграфи * / .popup p (margin: 0; padding: 5px 0)
Як бачите, дорогі друзі, все досить таки просто і ніякої зайвої мішанини. Якщо все зробите правильно, то отримаєте в свій арсенал інструментів, чудове, в якому зможете розмістити будь-який контент, будь то текстовий зміст, фотографії, різні форми реєстрації та зворотного зв'язку, або ж відеоролики з будь-якого стороннього джерела. Експериментуйте з параметрами, видозмінюйте вікно, як вашій душі завгодно. По можливості, діліться в коментарях своїми напрацюваннями, або ж виникли раптом проблемами.
А може і це вам буде цікаво:
додатки:
Часто, навіть дуже часто мені задають питання, як же правильно зупиняти відтворення відео при закритті мод. вікна. При закритті модального вікна, програвання відеоролика в демо зупиняється. У демо використовував подія onclick, для кнопки закриття вікна, вказавши на засланні адреса демо-сторінки, тобто сторінки, на якій розташоване вікно з відео:
Можна просто використовувати посилання з порожнім атрибутом href \u003d "", в обох випадках відбувається перезавантаження сторінки і відповідно закривається, і вікно, і зупиняється відео, милицю ще той звичайно, але іншого більш дієвого і валидного рішення, без підключення javascript, на даний момент у мене немає.
| < script type= "text/javascript" src= "Http://www.youtube.com/player_api"> |
За допомогою API JavaScript, ви зможете управляти програвачем Chromeless Player і вбудованим програвачем YouTube за допомогою javaScript коду. Для нашого модального блоку з вбудованим відео, виконуваний js буде таким:
| < script> var player; function onYouTubePlayerAPIReady () (player \u003d new YT. Player ( "player");) $ ( "# stop"). click (function () (player. stopVideo ())) |
При кліці по кнопці з id \u003d "stop" буде викликана функція, вікно закриється і відтворення відео зупиниться.
Однак слід розуміти, що для інших відеосервісів і танці з бубнами будуть іншими))). Хоча завжди є вибір - це використовувати готові спеціалізовані плагіни.
Веб-дизайнери і підприємці, які живуть в російськомовних країнах, напевно хочуть мати можливість користуватися не тільки англомовними шаблонами. Вони також хочуть мати доступ до колекцій російськомовних готових рішень. Тому хочемо звернути вашу увагу на новітній розділ, який тепер представлений на маркетплейсе TemplateMonster. Варто згадати про те, що текст для кожного з шаблонів був написаний вручну. До того ж, вам не потрібно володіти якимись надприродними знаннями в сфері програмування, щоб створити вражаючий онлайн-проект.
З повагою Андрій
Вітання всім. Подивився тут днями уважно статистику блогу і виявив, що більший інтерес у наших інтернет-трудящих викликають і приклади зі створення модальних вікон. Найпопулярнішими виявилися рішення реалізації спливаючих вікон без використання javascript, виключно на чистому.
За час роботи у мене накопичилося чимало цікавих рішень, які в різний час я детально розписав в розгорнутих статтях на сторінках свого блогу, але багато хто з цих уроків з часом пішли на задній план. Читачам блогу іноді складно зорієнтуватися і велика частина працездатних методів створення ефектних модальних вікон і спливаючих форм просто залишаються непоміченими.
Тому, з огляду на інтерес користувачів до даного питання, вирішив об'єднати всі уроки і приклади з даної теми і вивести в окремій статті колекцію модальних вікон і форм. Вийшов невеликий огляд з коротким описом, посиланнями на приклади і статті. Так що дивіться, вивчайте і якщо комусь, будь-яка з рішень припаде до душі, сміливо забирайте вихідні, і творіть, творіть, творіть ...
1. Модальні вікна за допомогою CSS3 без Javascript
Найпопулярніший, серед читачів мого блогу, метод створення модальних вікон. Дуже простий в реалізації. Формування зовнішнього вигляду спливаючих блоків і весь функціонал засновані виключно на CSS3, без підключення в роботу Javascript і додаткових графічних елементів.
Можливість підключення і виведення модальних вікон практично на будь-якому сайті. Досить правильно розмістити html-каркас в потрібному місці, додати потрібний вам контент, підключити стилі, прив'язати все це справа до активує кнопці або будь-якого іншого елементу сайту (картинки, пункти меню, посилання, окреме слово в тексті і т.д.) і все , готове до роботи.
2. Модальне вікно за допомогою CSS і
Дуже простий, легкий плагін jQuery, за допомогою якого ви зможете швидко і без проблем реалізувати у себе на сайті висновок модальних модальних вікон з будь-якою інформацією, будь то простий текст, картинки, різний форми або вбудоване відео.
Зовнішній вигляд формується за допомогою CSS, розмір вікна задається безпосередньо на засланні, в атрибуті href \u003d "#? W \u003d 500", де #? W \u003d 500 вказує необхідну ширину вікна. Втім, вивчивши деталі уроку, все стане гранично ясно. Для роботи даного рішення необхідна підключена до сайту бібліотека jQuery.
3. Адаптивне модальне вікно строго по центру
Спочатку урок замислювався саме про абсолютну центрации блокових елементів з вмістом, але про це стільки написано, що вирішив розбавити тему адаптивностью і накласти все це на модальне вікно, при цьому користуючись виключно засобами CSS. Що з цього вийшло, можете дізнатися вивчивши урок.
4. Модальне вікно на HTML5, CSS3 і прихованих чекбоксах
Досить свіжа методу для реалізації спливаючих (модальних) віконець. Приховані чекбокси я частіше використовував для створення розкриваються інформаційних блоків або «». В результаті виявилося все дуже навіть просто, за допомогою CSS3 і синтаксичних особливостей HTML5 можна легко організувати роботу модальних вікон. На оформленні особливо не зациклювався (вся суть не в цьому), за вихідну взяв приклад інфо-блоків Bootstrap. Спосіб відмінно спрацьовує у всіх сучасних браузерах, користувачі застрягли на замшілих версіях IE-шки, на жаль пролітають повз.
5. Модальний блок відео на CSS3
Чи не дає мені спокою тема організації перегляду відео в модальному блоці, виключно засобами CSS3, без javascrip. Ні з висновком відео в модальному вікні все в порядку, не можу знайти адекватного і всіх влаштовує рішення про зупинення відео при закритті вікна. Тупо використовував посилання з порожнім атрибутом href \u003d "", багатьох распальцованних майстрових від цього не зовсім кошерного способу перевертає уві сні, але іншого більш дієвого і валидного рішення, на даний момент поки не знайшов.
Мене часто запитували, чи можна вбудувати всередину модального вікна, який-небудь слайдер, не тільки для картинок, але і для тексту. Чому б і ні. У буржуинов знайшовся простенький, відповідний по всіх параметрах ротатор контенту, залишалося об'єднати його з вже готовим модальним вікном. І в результаті вийшло те, що вийшло :)). Подивіться, все досить просто у виконанні.
7. Інтеграція контактної форми в модальне вікно
На багатьох сайтах використовуються спливаючі форми зворотного зв'язку, форми реєстрації та входу. Найпростіше вбудувати робочу форму в готове модальне вікно. Береться цілком собі пристойна форма, зверстаний на CSS3, будь-який варіант модального вікна представлений вище, залишається лише обидва ці елементи об'єднати в єдиний механізм. Як це зробити? Саме про це, детально розписано в представленому уроці.
Відмінна можливість для ваших користувачів відправляти повідомлення з будь-якої сторінки, або окремого запису сайту (блогу) - це окрема, модальна форма контактів. Правильно прикручуєте до форми php-обробник, розміщуєте в тіло потрібної вам сторінки і все, залишається тільки періодично перевіряти свою поштову скриньку. Даний метод коректно працює у всіх сучасних браузерах: Chrome, Firefox, Opera, Safari, так само в Internet Explorer, починаючи з 9-ї версії. Сама форма наділена функціями модального вікна за допомогою магії CSS3.
Лайтбокс свого роду той же модальне вікно, вірніше принцип роботи практично той же, правда використовується здебільшого для перегляду збільшених або повно-розмірних зображень. Свого часу вирішив закласти більш-менш адаптивну версію Lightbox, виключно засобами CSS3. Що з цього вийшло зможете дізнатися подивившись приклад і якщо тема вставить, вивчіть і урок. Користувачі щільно підсіли на IE 8 і нижче, на жаль нічого не побачать, метод заснований на використанні псевдокласу: target.
10. Спливна контактна форма для сайту
Цікаве (на мій погляд) рішення про створення окремої, оригінально оформленої, спливаючій форми контактів для сайту. Робота форми заснована на обробці події onclick. Оформлення за допомогою оригінального зображення у вигляді поштового конверта. Працює форма швидко і коректно у всіх браузерах, так що цілком гідний зразок коштів взаємодії з користувачами.
11. Спливаюче вікно при завантаженні сайту за допомогою CSS3 і трохи javascript
Мене, як і багатьох інших виморожують різні спливаючі вікна при початковій завантаженні сайту. Вважаю такий метод занадто нав'язливим. Але фішка затребувана і широко використана, а значить подивитися як все це справа працює, напевно все ж варто. Всі сучасні браузери з підозрою ставляться до різного роду спливаючих вікон на початковому етапі завантаження сайту, вони їх просто-напросто блокують. У представленому уроці, докладно розписую, як це блокування можна обійти, так само дізнаєтеся, як правильно використовувати cookie, щоб вікно було погляду користувача один раз при першому заході на сайт, або ж з певним інтервалом.
На цьому мабуть і все. Звичайно в загашнику знайдеться ще пара-трійка робочих варіантів створення модальних вікон, а в інтернетах то їх скільки, головне знайти те що потрібно. Сподіваюся ця добірка допоможе зорієнтуватися по темі в купі статей мого блогу. У міру вдалих розкопок і знаходженню загубився матеріалу, огляд буде оновлюватися.
З повагою Андрій
