Нюансы создания диалоговых окон на HTML 5
После обилия всплывающей рекламы, которая буквально бомбардирует пользователей Интернета на каждом сайте, у многих к ней выработалось крайне негативное отношение.
Расширенные возможности HTML 5 и css упростили создание диалоговых окон. Теперь вам необходимо будет лишь задействовать элемент <dialog>. Сегодня его поддержка ограничена браузерами Safari 6.0 и Хром Canary, но в дальнейшем обязательно станут доступны другие обозреватели. Чтобы активировать <dialog>, просто перейдите по секретному адресу chrome://flags и активируйте «Enable Platform features».
Ниже мы перечислим методы взаимодействия с диалоговыми окнами:
-
Show (). Используется для открытия диалога.
-
showModal (). Пользователь получает доступ только к открытому «модальному окну».
-
Close (). Метод просто закрывает диалог.
Так называемый HTMLDialogElement может включать в себя два атрибута:
-
Open: может принимать два значения: true (пользователь увидит диалог) или false (скрытый).
-
returnValue (возвращает параметры, переданные в close ().
Кроме этого, <dialog> поддерживает фокус на инпутах в диалоге (атрибут autofocus), cancel event (срабатывает, если окно закрылось кнопкой Esc), и др.
Ниже мы приводим конкретный пример использования <dialog>.
<dialog id="Dialog">
<p>Спасибо Hevix'у за отличный урок ;)</p>
<button id="closeDialog">Закрыть</button>
</dialog>
<button id="showDialog">Открыть окно</button>
Вы сами видите, насколько прост и понятен этот код. Содержание всплывающего окна всегда нужно заключать внутрь тега <dialog>. При показе содержимого элемента <dialog> не обойтись без методов .show () и .close (), которые упоминались ранее.
| 1 2 3 4 5 6 7 8 9 | (function() { var dialog = document.getElementById(‘Dialog’); document.getElementById(‘showDialog’).onclick = function() { dialog.show(); }; document.getElementById(‘closeDialog’).onclick = function() { dialog.close(); }; })(); |
Погружаться в стилизацию диалоговых окон с головой мы точно не будем – здесь и так все предельно просто. Зададим лишь общий стиль для будущего макета:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | dialog { top: 28%; width: 400px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 15px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px solid #eb9816; } button{ display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.4rem 0.8em; background: #eb9816; border-bottom: 1px solid #f1b75c; color: white; font-weight: bold; margin: 0 0.25rem; text-align: center; } button:hover, button:focus { opacity: 0.92; cursor: pointer; } |
Бывает и такое, что вам просто необходимо сфокусировать внимание посетителей на всплывающем окне. Тогда лучше использовать модальные окна. В HTML ничего не меняем, в JS файле находим .show() и меняем его на .showModal().
| 1 2 3 4 5 6 7 8 9 | (function() { var dialog = document.getElementById(‘Dialog’); document.getElementById(‘showDialog’).onclick = function() { dialog. showModal(); }; document.getElementById(‘closeDialog’).onclick = function() { dialog.close(); }; })(); |
В принципе, можно пойти дальше и добавить модальному окну задний фон. Для этого воспользуйтесь псевдоэлементом :backdrop.
| 1 2 3 4 5 6 7 8 | dialog::backdrop{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); } |
