Свойства HTML5/CSS3 предоставляют разработчику возможности для быстрого создания логики оконного диалога с возможностью ввода небольших объемов информации, подтверждения действий или информирования посетителя.
Функциональность, предоставляемая через функции JavaScript, доступна несложному коду HTML и нескольким правилам CSS. Эффект будет не меньший, а в некоторых случаях даже больший.
Смысл модального окна
Вывести информацию и подтвердить ее получение: окно появляется в браузере, и сайт ожидает подтверждения посетителя о прочтении им конкретной информации. Вывести вопрос и получить ответ: да или нет. Вывести поля ввода (форму, запрос) и получить текст, данные или набор значений по всем полям формы.
Вариантов использования модального окна можно придумать множество, а на самом деле оно представляет собой обычный тег HTML. Используется псевдокласс :target и свойство pointer-events. Первое определяет, что делать при наведении мышки (иного указателя) на ссылку. Второе позволяет предоставить элементу возможность вновь реагировать на события.
Пример информационного окна
На рисунке показана ссылка, клик по которой открывает модальное окно CSS с информацией. Только после того как посетитель кликнет на «элемент закрытия» окна - «X», окно исчезнет, и снова появится ссылка на открытие окна.
Диалог начинается по тегу «a» и заканчивается тегом «a». Вариантов реализации этой идеи можно придумать огромное количество.
В данном примере стиль описания ссылки на открытие окна и на его закрытие выполнен различным образом. Первая ссылка делает видимым div с идентификатором scWiindow, чем создает иллюзию открытия окошка, в котором есть информация и только одна кнопка (ссылка) на закрытие.
Никаких действий на странице произвести будет нельзя, пока не будет закрыто окно. Используя такое модальное окно HTML/CSS, можно проектировать элементы управления, которые моментально всплывают на странице, блокируют управление и позволяют делать настройки нужных параметров. По завершении процесса можно восстановить логику работы страницы в обычном режиме.
Динамика всплывающих окон
Современные возможности HTML5/CSS3 поддерживаются всеми браузерами. Разработчик имеет обширный спектр функциональности по использованию градиента, прозрачности, трансформации, перемещению, преобразованию, вращению и прочим действиям с тегами.
Ничто не мешает совмещать различные эффекты друг с другом в поисках совершенных форм и оригинального дизайна. Модальное окно на CSS - это идея применения pointer-events и :target, но ничто не мешает использовать другие правила стилей.
Однако, прикладывая усердие к разработке дизайна, способного удивить любого посетителя, следует отметить: JavaSript - это управляемый способ создания диалога. Здесь можно контролировать все.
Простое модальное окно на CSS, использующее комбинацию тегов с градиентом, трансформацией и появлением через вращение (к примеру), - гарантия существенной задержки в работе страницы.
Современные стили - это многообразие возможностей, но эти возможности жестко реализованы в алгоритмах исполнения гипертекста и применения правил CSS. Здесь управлять можно только через значения правил и размеры отображаемых тегов.
Большой размер тега, сложная комбинация градиентов - гарантия того, что страница будет отображена с задержкой или модальное окно CSS появится тогда, когда у посетителя уже иссякнет терпение.
Системы управления сайтами
Можно создавать собственные системы управления функционалом страниц через модальные окна. Ckeditor & CSS на "Друпал 7" - хороший пример создания модальных диалогов. Используя обширный арсенал функций API и инструмент ctools этой популярной системы управления сайтами, можно быстро и эффективно манипулировать правилами стилей без глубокого знания HTML5/CSS3, то есть непрофессиональными разработчиками.
Другие системы управления сайтами представляют свои варианты применения модальных окон и идей такого рода диалогов. Использование JavaScript здесь может быть скрыто или применено для иных целей, но существенно, что любая CMS не позволит разработчику (пользователю) переусердствовать в создании сложного и емкого по времени отображения дизайна.
Применение систем управления сайтами является сегодня популярным способом создания веб-ресурсов, автоматически использует современные возможности создания модальных окон из таблиц CSS и не требует наличия фактических знаний о том, как это работает на самом деле.
Идентичность логики диалога по страницам
Достоинство применения стилей в противовес использованию JavaScript в том, что можно один раз описать логику диалога по всем вариантам модальных окон:
- вывод информации для сведения;
- запрос подтверждения операции;
- изменение параметров страницы;
- ввод данных и пр.
После того как диалог (по всем вариантам возможных запросов с сайта и ответов посетителя) разработан, можно его одинаковым образом использовать как для текущей работы, так и для создания аналогичных веб-ресурсов.
JavaScript не дает такой возможности, но предоставляет управляемый диалог. Скрипт приходится подстраивать в каждом конкретном случае. Логика программируемого диалога отлична от описательного через HTML/CSS.
У каждого варианта свои достоинства. Лучшее решение - комбинировать и использовать минимальные возможности каждого варианта. Разработчик может применять сложные и эффектные возможности современного инструментария при разработке сайтов, но разумный подход в разработке, сочетающий достоинства каждого варианта, является самым целесообразным.
Динамичное создание стилей
Модальное окно на CSS - это несколько наборов правил, назначенных на несколько тегов. JavaScript - это возможность динамичного создания тегов и стилей. В этом контексте можно написать переносимые функции, которые не потребуют увязки в общий функционал сайта, а будут его вспомогательным арсеналом.
При этой реализации такой идеи можно разработать функции, которые создают диалоговые окна в нужном варианте, и разработчик может не переносить куски кода из HTML-страниц и CSS-таблиц в другие свои разработки.
Подключив один js-файл, который автономно позволяет создавать нужные окна по вызову соответствующей функции, можно оптимально совместить достоинства управляемого и описательного вариантов создания модального окна на CSS и HTML.
