Модальні вікна є невід'ємною частиною сучасного веб-дизайну, за їх допомогою, розробник може вдатися до методу зациклювання на одній сторінці і не перекидання відвідувача на допоміжні сторінки. В даному уроці ми розглянемо як створити чудові модальні вікна з розмитим фоном для сайту використанням jQueryта CSS3. Завдяки цим правилам ми створимо розмите фон з появою вікна, що прив'яже погляд відвідувача лише до необхідної інформації на сайті.
Модальні вікна з розмитим фоном на CSS3
Економічні звістки найкращі тільки тут: Дробаха
Анімація вікна буде встановлена таким способом, що при натисканні на кмопку поява, вікно здійснюватиме анімацію зверху вниз, при цьому автоматично посилюється розмитість фону.
Крок 1. HTML
У нас буде контейнер, який містить: заголовок, опис, потім ми додаємо клас для кнопки з класом toggleModalдля відкриття модального вікна:
Заголовок
Опис
Заголовок для вікна
Вкладки дуже цікава і зручна штука при створенні сайту, вона дозволяє правильно організувати інформацію, заощадивши трохи місця на сайті.
Потім нам необхідно додати клас modal is-active, цей клас буде відповідати за виклик модального вікна, modal__headerвідповідає за заголовок та його стилізацію вікна.
Крок 2. CSS
Тепер перейдемо до стилізації, першим кроком стане клас button,який буде відповідати, як ви вже здогадалися, за кнопки на сайті ми встановлюємо для нього правильні параметри відображення:
Стилі досить прості, вони зберігаються окремим файлом і не повинні викликати складності при їхньому редагуванні у розробника, який хоч раз зіштовхувався з CSS.
Крок 3. JS
Останнім нашим, але не менш важливим стане встановлення автоматичного розмиття фону при появі меню, а також клікабельності посилань, у цьому нам допоможуть невеликі правила. JS:
$("body").addClass("is-blurred"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("is-blurred"); ));
В результаті ми отримуємо чудові модальні вікна, які приємні для погляду ліжка і не нагромаджують Ваш дизайн.
3. Приклад модального вікна jQuery, викликаного посилання (з Демо)
Швидше за все, Ви вже не раз бачили в інтернеті спливаюче модальне вікно - підтвердження реєстрації, попередження, Довідкова інформація, завантаження файлу та багато іншого. У цьому уроці я запропоную кілька прикладів створення найпростіших модальних вікон.
Створюємо просте спливаюче модальне вікно
Приступимо до розгляду коду найпростішого модального вікна, яке відразу з'являтиметься jQuery код
Код вставляєте у будь-яке місце у bodyВашу сторінку. Відразу після завантаження сторінки, без будь-яких команд, Ви побачите вікно такого вигляду:
А ось наступний код буде виконуватись після завантаження всієї сторінки у браузер. У нашому прикладі після завантаження сторінки із зображеннями вискочить просте спливне віконце:
Виклик модального вікна jQuery за посиланням CSS
Наступним кроком буде створення модального вікнапри натисканні на посилання. Фон при цьому буде повільно затемнюватися.
Часто можете бачити, що форма входу та реєстрації знаходяться саме у таких вікнах. Приступимо до справи
Для початку напишемо html-частина. Цей код розміщуємо у body Вашого документа.
Виклик модального вікна
Текст модального вікна
Закрити
Текст у модальному вікні.
Код CSS. Або в окремому css-файлі, або в
У коді jQuery основну увагу приділимо позиції модального вікна та масці, у нашому випадку поступового затемнення фону.
Увага! Не забуваймо підключити бібліотеку в head документа!
Підключення бібліотеки до сайту Google. Ну і безпосередньо сам код jQuery.
Код jQuery
1. Модальне вікно на jQuery "Simple Modal Box"
2. jQuery плагін "LeanModal"
Відображення вмісту в модальних вікнах. Щоб переглянути плагін у дії на демонстраційній сторінці, натисніть посилання: Sign Up Form або Basic Content.
3. jQuery плагін «ToastMessage»
Спливаючі повідомлення. Плагін у двох варіантах. В одному випадку повідомлення зникають самостійно, після певного часу, в другій реалізації для того, щоб закрити повідомлення необхідно натиснути на кнопку.
4. Вміст, що спливає у модальному вікні
Плагін "Reveal". Щоб переглянути плагін у дії, натисніть кнопку «Fire A Reveal Modal» на демонстраційній сторінці.
5. Симпатичні діалогові вікна
Натисніть на хрестик на демонстраційній сторінці, щоб переглянути плагін у дії.
6. Mootools модальне вікно, плагін "MooDialog"
7. jQuery спливаюча панель зверху екрану
8. jQuery спливаюче вікно
jQuery плагін для відображення форми зворотнього зв'язкуу спливаючому вікні.
10. MooTools плагін «LightFace» для реалізації діалогових вікон Facebook
Діалогові вікна у стилі Facebook. Крім статичної інформації у вікна можна помістити зображення, кадри, Ajax запити. Багато налаштувань роботи плагіна, дуже потужний інструмент. Виглядає дуже стильно та функціонально. Пройдіть посилання на демонстраційній сторінці, щоб переглянути приклади з різним вмістом.
11. jQuery модальне вікно
Акуратне спливаюче діалогове вікно на jQuery.
12. Модальні вікна jQuery
Симпатичні модні вікна, що спливають. Три стильових оформлення. На демонстраційній сторінці представлено 3 посилання для виклику вікон.
13. Модальні вікна jQuery
Випливають модальні вікна кількох видів. Щоб переглянути плагін у дії, натисніть посилання на демонстраційній сторінці.
15. Спливає поверх сторінки повідомлення
Повідомлення відображається поверх сторінки, яка у свою чергу затемняється. Натисніть на напис «Click me» на демонстраційній сторінці, щоб побачити спливаюче повідомлення. Натискання на хрестик його закриє. Реалізоване за допомогою jQuery.
16. Модальне вікно "ModalBox" на javascript
Реалізація сучасних модальних діалогових вікон без використання спливаючих вікон та перезавантажень сторінки. На демонстраційній сторінці натисніть кнопку «Start Demo» щоб подивитися на роботу скрипта.
17. "Leightbox" плагін з використанням бібліотеки Prototype
Плагін відображає контент у модальних вікнах.
Досить часто на сайтах можна зустріти модальні вікна, і всі вони використовуються для різних завдань. Насправді це досить потужний засіб, який дозволяє зробити інтерфейс сайту більш інтерактивним і зручним. Наприклад, модальні вікна можуть бути використані для різних форм, таких як форма авторизації, форма зворотного зв'язку, оформлення замовлення товару, та й мало.
У цьому посту ми розглянемо приклад, як зробити модальне просте вікно за допомогою JQuery та CSS. Особливість даного прикладув тому, що тут не потрібно, ну крім самої бібліотеки JQuery.
Розміщуємо код модального вікна на сторінці:
закрити
Відкрити модальне вікно
Як видно з розмітки, блок модального вікна це div c атрибутом id= modal_formякий містить елемент span c id= modal_close. Цей елемент буде кнопкою для закриття модального вікна, крім того, нижче блоку розташований блок div з атрибутом id= overlayщо служить одночасно і для затемнення фону. Модальне вікно відкриватиметься за посиланням, з класом modal.
Для modal_formми задали фіксовану ширину та висоту, а потім відцентрували положення по центру екрана. Для підкладки модального вікна ( overlay) ми задаємо розмір по ширині екрана, заливку з прозорістю, а також ховаємо її за замовчуванням. Особливий момент з z-indexУ модального вікна він повинен бути найбільшим з усіх елементів на сторінці, а в обкладинки повинен бути більше всіх елементів, крім самого модального вікна.
Тепер до основного, це код на JavaScript. Для модального вікна буде використовуватись дві основні події, це його відкриття - клік по елементу з класом modal, у нашому випадку це посилання, і закриття модального вікна, це клік по обкладинці ( overlay) або клік на кнопку закрити, в нашому випадку це елемент span з id= modal_close.
За допомогою animate ми змінюємо позицію щодо вертикалі top, а також прозорість opacity, і за допомогою цього отримуємо цікавий ефект. Подібний ефект використовується як при відкритті вікна, так і його закритті. Відмінність у тому, що змінюється порядок застосування властивостей для блоків, тим самим візуалізуючи відкриття та закриття вікна.
Розповідаючи про різні техніки сайтобудування, було б безглуздо не розповісти, про деякі способи створення модальних вікон. Про призначення, корисність і проблеми використання спливаючих, модальних вікон ми міркувати не будемо. Розберемо лише один із численних прикладів створення таких вікон. Бувають ситуації коли немає можливості використовувати спеціальні плагіни, наприклад такі як і , тому варто зрозуміти, як можна створити своє власне.
Давайте подивимося, як це зробити:
HTML
Почнемо з додавання тегів з наступними атрибутами:
href - #?w=500 вказує ширину вікна
rel – унікальний атрибут для кожного вікна
class="poplight" – клас для показу спливаючого вікна
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Див Вікно в дії - Ширина = 500px
Див Вікно в дії - Ширина = 500px
Потім нам необхідно створити вбудовану розмітку для спливаючого вікна. Розмістити можна в будь-якому місці сторінки, наприклад у нижній частині змісту. Зверніть увагу, що ідентифікатор спливаючого вікна відповідає атрибуту relтега Це і пов'язуватиме посилання та спливаюче вікно разом.
Заголовок
Будь-який текст, що душі завгодно
І так, з розміщенням нашого вікна на сторінці ми розібралися, тепер давайте оформимо його за допомогою стилів, надамо йому, так би мовити, пристойного вигляду.
CSS Верстка
Для більшої ясності, я прописав деякі пояснення до параметрів стилю нашого вікна. Оскільки спливаючі вікна можуть мати різний розмір, ми не вказуємо в CSS popup_blockкраю вікна, обчислити необхідний розмір, це якраз завдання для .
і, а можете винести в окремий файл ваших стилів, зазвичай це файл style.css, або щось у цьому роді.
Налаштування JQuery
Для повноцінної роботи модального вікна необхідно підключити jQuery, хто не знайомий з роботою цієї бібліотеки можете прочитати .
А ми підемо далі. Ви можете саму останню версію JQuery з сайту бібліотеки, або ж використовувати розміщений в надрах Google окремий файл, підключивши його до документа, в розділі перед тегом, що закриває
, розмістивши такий рядок:
У наступному кроці розглянемо начинку та функції плагіна jqueryДля активації нашого спливаючого вікна код містить деякі пояснення, для кращого розуміння того, що ми робимо.
Плагін JQuery
$(Document) . ready(function () ( //При натисканні на посилання з класом poplight та href атрибута тега з #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ); //отримуємо ім'я вікна, важливо не забувати при додаванні нових змінювати ім'я в атрибуті rel посилання var popURL = $(this) . attr("href"); //отримуємо розмір із href атрибуту посилання//запит та змінні з href url var query = popURL. split ("?"); var dim = query [1]. split ("&"); var popWidth = dim [0]. split ("=") [1]; //перше значення рядка запиту//Додаємо до вікна кнопку закриття$("#" + popID) . fadeIn(). css(("width": Number(popWidth))). prepend( ""
)
;
//Визначаємо маржу(запас) для вирівнювання по центру (по вертикалі та горизонталі) - ми додаємо 80 до висоти/ширини з урахуванням відступів + ширина рамки, визначені в css var popMargTop = ($("#" + popID) . height() + 80) / 2; var popMargLeft = ($("#" + popID) . width() + 80) / 2; //Встановлюємо величину відступу$("#" + popID) . css(( "margin-top": - popMargTop, "margin-left": - popMargLeft)); //Додаємо напівпрозоре тло затемнення$("body" ) . append(" "
)
;
//div контейнер буде прописаний перед тегом.
$("#fade" ) . css(( "filter" : "alpha(opacity=80)" ) ) . fadeIn(); //напівпрозорість шару, фільтр для тупого IE return false; )); //Закриваємо вікно та фон затемнення$(Document) . on("click" , "a.close, #fade" , function () ( //закриття кліком поза вікна, тобто. на тлі...$("#fade , .popup_block" ) . fadeOut(function () ( $("#fade, a.close" ) . remove() ; //плавно зникають)); return false; )); ));
Загалом, якщо не лізти в нетрі і не навантажувати себе зайвою кодовою абракадаброю, наше чудове модальне віконце готове до роботи, і чекає на Ваші думки перекладені в текст, або будь-яку іншу корисну інформацію. Тим хто хотів би використовувати модальне вікно, для розміщення в ньому відео або масштабних зображень, я все ж таки порадив скористатися спеціальними плагінами типу , оскільки наведений вище приклад модального вікна, призначений більше для легкої і не дуже важкої інформації, хоча за бажання і це не проблема .
Наступного разу обов'язково розповім і покажу на прикладі, і напевно, багатьом буде цікаво дізнатися про інші сторонні об'єкти в спливаюче вікно. Так що не губіться в павутинні і стежте за оновленнями!
Оновлення: Версія dm-modal.js v1.3 (15.01.2017) Виправлено: Замінено застарілу функцію.live() , використовується синтаксис href*=\\# . Тепер плагін працює з актуальними версіямибібліотеки jQuery
На цьому все! Сподіваюся, вийшов ще один корисний урок.
