Модальний CSS: просто, швидко і зручно

Властивості HTML5/CSS3 надають розробникові можливості для швидкого створення логіки віконного діалогу з можливістю введення невеликих обсягів інформації, підтвердження дій або інформування відвідувача. Функціональність, яка надається через функції jаvascript, доступна нескладному коду HTML і декільком правилам CSS. Ефект буде не менший, а в деяких випадках навіть більший.

Зміст модального вікна

Вивести інформацію і підтвердити її отримання: вікно з'являється в браузері, і сайт очікує підтвердження відвідувача про прочитання їм конкретної інформації. Вивести питання і отримати відповідь: так або ні. Вивести поля (форму, запит) і отримати текст, дані або набір значень по всіх полях форми.


Варіантів використання модального вікна можна придумати безліч, а насправді воно являє собою звичайний тег HTML. Використовується псевдоклас :target і властивість pointer-events. Перше визначає, що робити при наведенні мишки (іншого покажчика) посилання. Друге дозволяє надати елементу можливість знову реагувати на події.

Приклад інформаційного вікна

На малюнку показана посилання, клік по якій відкриває модальний CSS з інформацією. Тільки після того як відвідувач клацне на «елемент закриття» вікна - «X», вікно зникне, і знову з'явиться посилання на відкриття вікна. Діалог починається з тегу «a» і закінчується тегом «a». Варіантів реалізації цієї ідеї можна придумати безліч. В даному прикладі стиль опису посилання на відкриття вікна і на його закриття виконаний різним чином. Перша посилання робить видимим div id scWiindow, чим створює ілюзію відкриття віконця, в якому є інформація і тільки одна кнопка (посилання) на закриття.


Ніяких дій на сторінці зробити буде не можна, поки не буде закрито вікно. Використовуючи таке модальне вікно HTML/CSS, можна проектувати елементи управління, які моментально спливають на сторінці, блокують управління і дозволяють робити налаштування потрібних параметрів. По завершенні процесу можна відновити логіку роботи сторінки в звичайному режимі.

Динаміка спливаючих вікон

Сучасні можливості HTML5/CSS3 підтримуються всіма браузерами. Розробник має широкий спектр функціональності по використанню градієнта, прозорості, трансформації, переміщення, перетворення, обертання та іншим діям з тегами. Ніщо не заважає поєднувати різні ефекти один з одним у пошуках досконалих форм і оригінального дизайну. Модальне вікно на CSS - це ідея застосування pointer-events і :target, але ніщо не заважає використовувати інші правила стилів. Однак, прикладаючи старанність до розробки дизайну, здатний здивувати будь-якого відвідувача, слід зазначити: JavaSript - це керований спосіб створення діалогу. Тут можна контролювати все. Просте модальне вікно на CSS, що використовує комбінацію тегів з градієнтом, трансформацією і появою через обертання (наприклад), - гарантія істотної затримки в роботі сторінки. Сучасні стилі - це різноманіття можливостей, але ці можливості жорстко реалізовані в алгоритмах виконання гіпертексту і застосування правил CSS. Тут керувати можна тільки через значення правил і розміри відображуваних тегів.
Великий розмір тега, складна комбінація градієнтів - гарантія того, що сторінка буде відображена із затримкою або модальний CSS з'явиться тоді, коли у відвідувача вже терпіння вичерпається.

Системи управління сайтами

Можна створювати власні системи управління функціоналом сторінок через модальні вікна. Ckeditor & CSS на "Друпал 7" - хороший приклад створення модальних діалогів. Використовуючи великий арсенал функцій API і інструмент ctools цієї популярної системи управління сайтами, можна швидко і ефективно маніпулювати правилами стилів без глибокого знання HTML5/CSS3 тобто непрофесійними розробниками. Інші системи управління сайтами представляють свої варіанти використання модальних вікон та ідей такого роду діалогів. Використання jаvascript тут може бути приховано або застосовано для інших цілей, але суттєво, що будь-яка CMS не дозволить розробнику (користувачеві) перестаратися у створенні складного і ємного за часом відображення дизайну. Застосування систем управління сайтами є сьогодні популярним способом створення веб-ресурсів, автоматично використовує сучасні можливості створення модальних вікон з таблиць CSS і не вимагає наявності фактичних знань про те, як це працює насправді.

Ідентичність логіки діалогу по сторінкам

Гідність застосування стилів противагу використанню jаvascript в тому, що можна один раз описати логіку діалогу по всім варіантам модальних вікон: висновок інформації для відомості; запит на підтвердження операції; зміна параметрів сторінки; введення даних і ін. Після того як діалог (за всіх варіантів можливих запитів з сайту і відповідей відвідувача) розроблено, можна його однаковим чином використовувати як для поточної роботи, так і для створення аналогічних веб-ресурсів.
jаvascript не дає такої можливості, але надає керований діалог. Скрипт доводиться підлаштовувати в кожному конкретному випадку. Логіка програмованого діалогу відмінна від описового через HTML/CSS. У кожного варіанту свої достоїнства. Краще рішення - комбінувати і використовувати мінімальні можливості кожного варіанту. Розробник може застосовувати складні і ефектні можливості сучасного інструментарію при розробці сайтів, але розумний підхід в розробці, поєднує переваги кожного варіанта, є найдоцільнішою.

Динамічне створення стилів

Модальне вікно на CSS - це кілька наборів правил, призначених на кілька позначок. jаvascript - це можливість динамічного створення тегів і стилів. У цьому контексті можна написати переносяться функції, які не зажадають ув'язки в загальний функціонал сайту, а його допоміжним арсеналом. При цій реалізації такої ідеї можна розробити функції, які створюють діалогові вікна в потрібному варіанті, і розробник може не переносити шматки коду з HTML і CSS-таблиці в інші свої розробки. Підключивши один js-файл, який автономно дозволяє створювати потрібні вікна по виклику відповідної функції, можна оптимально поєднати переваги керованого і описового варіантів створення модального вікна на CSS та HTML.