Создание собственных диалоговых окон HTML5

Опубликовано: 2017-03-29

Диалоговое окно является одним из наиболее часто используемых элементов пользовательского интерфейса веб-сайта. Он используется для нескольких целей, включая отображение уведомлений, наличие формы подписки, оповещение об ошибках/предупреждениях и привлечение внимания посетителя к важной информации. Когда диалоговые окна спроектированы эффективно и правильно используются, они могут облегчить задачу пользователя.

Ранее для создания диалогового окна требовалось использовать подключаемый модуль jQuery, например Pop Easy, jQuery UI Dialog или Twitter Bootstrap Modal. Но теперь, с введением нового элемента HTML5 <dialog> , разработчикам стало намного проще создавать всплывающие диалоговые окна и модальные окна на веб-странице.

Первоначально <dialog> вошел в спецификацию HTML5 как отличное решение для разметки диалогов, но в 2009 году он был исключен из спецификации HTML5. Тем не менее, он снова вернулся в новой форме.

В этом посте я расскажу вам об элементе <dialog> и покажу, как вы можете извлечь из него максимальную пользу. Давай начнем!

Если вы хотите увидеть элемент <dialog> в действии или поиграть с кодом, просмотрите живую демонстрацию здесь.

Поддержка браузером элемента <dialog>

К сожалению, браузерная поддержка <dialog> пока ограничена. В настоящее время этот элемент поддерживается только в Safari 6.0 и Chrome Canary. Несмотря на то, что Chrome Canary полностью поддерживает этот тег, для его использования необходимо установить флаг. Перейдите на chrome://flags и включите флаг «Включить экспериментальные функции веб-платформы» .

Включить экспериментальные функции веб-платформы включены

После включения флага необходимо перезапустить браузер, чтобы изменения вступили в силу.

Интерфейс HTMLDialogElement

Интерфейс HTMLDialogElement , включенный в спецификации HTML для элемента <dialog> , имеет множество свойств и методов, которые можно использовать для отображения и исчезновения диалоговых окон. Они следующие:

Методы:

Интерфейс HTMLDialogElement имеет три метода для открытия и закрытия диалогов.

  • show() : этот метод используется для отображения диалогового окна. Пользователи по-прежнему могут получить доступ к другому содержимому HTML-документа, пока открыто диалоговое окно.
  • showModal() : используется для запуска «модального диалога» , который запрещает пользователю доступ к чему-либо, кроме диалогового окна на веб-странице.
  • close() : используется для закрытия диалога. Вы можете передать returnValue как необязательный параметр, который обновит свойство returnValue .

Характеристики:

В интерфейс HTMLDialogElement включены два свойства.

  • returnValue : извлекает параметр, который был дополнительно передан в close() .
  • open : это свойство является логическим значением. Если true , диалоговое окно будет видно пользователю. В противном случае он будет скрыт.

События:

Когда диалог закрывается, будет запущено событие close .

 dialog.addEventListener('закрыть', function() {
Здесь будет другой код…
});

Помимо этих ключевых методов и свойств, элемент <dialog> также поддерживает:

  • form[method="dialog"] : используется для интеграции формы с <dialog> . Действует только внутри диалога.
  • autofocus attribute : используется для придания фокуса элементу управления формой внутри диалогового окна.
  • cancel event : событие cancel запускается, когда модальное диалоговое окно закрывается с помощью «Esc»

Теперь, после понимания основ элемента <dialog> , давайте рассмотрим несколько примеров.

Создание диалога

Сначала я покажу вам, как создать простой диалог. Код, приведенный ниже, определяет простой элемент <dialog> с некоторым содержимым, кнопку закрытия, чтобы скрыть диалог, и кнопку показа, чтобы запустить диалог.



Добро пожаловать в Responsive Junction!


Сделайте ваш существующий сайт адаптивным

Когда вы протестируете приведенный выше код в своем браузере, вы не увидите ничего, кроме кнопки «Показать диалоговое окно» без каких-либо функций, как показано на снимке экрана ниже:

Кнопка «Показать диалог» без каких-либо функций

Чтобы открыть и закрыть элемент <dialog> , вам нужно использовать JavaScript .show() и .close() .

 (функция() {  
 	var dialog = document.getElementById('Диалог');
document.getElementById('showDialog').onclick = функция() {  
диалог.шоу();  
};  
document.getElementById('closeDialog').onclick = функция() {  
диалог.закрыть();  
};
})();

Теперь, если вы нажмете кнопку «Показать диалог» , вы увидите диалоговое окно в браузере. Нажатие «Выход» закроет диалоговое окно. Вот скриншот:

При нажатии Exit диалоговое окно закроется.

Добавление стиля к диалогу

Вы можете добавить стили CSS в свой диалог так же, как и к любому другому элементу. По умолчанию диалоговое окно будет отображаться горизонтально по центру при наложении других элементов. Если вас устраивает позиция и внешний вид по умолчанию, дальнейший CSS не требуется. В противном случае вы можете добавить свой собственный CSS, чтобы подогнать и оформить диалоговое окно на свой вкус, как я сделал ниже:

 диалог {
топ: 28%;
ширина: 400 пикселей;  
граница: 1px сплошная rgba (0, 0, 0, 0,3);
радиус границы: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0,3);
верхняя граница: 5px сплошная #eb9816;
}
кнопка{
отображение: встроенный блок;
радиус границы: 3px;
граница: нет;
размер шрифта: 0.9rem;
набивка: 0.4rem 0.8em;
фон: #eb9816;
нижняя граница: 1px сплошная #f1b75c;
белый цвет;
вес шрифта: полужирный;
запас: 0 0,25 бэр;
выравнивание текста: по центру;
}
кнопка: наведение, кнопка: фокус {
непрозрачность: 0,92;
курсор: указатель;
}

Добавление стиля к диалогу

Создание модального диалога

Если вы хотите запретить своим пользователям доступ к содержимому вашего HTML, вы можете использовать модальные диалоговые окна. Поскольку модальное диалоговое окно становится серым, все остальное, кроме диалогового окна, будет отображаться серым, пользователи не смогут выбрать выделенный серым цветом текст или щелкнуть, чтобы выбрать кнопки, пока диалоговое окно открыто.

Создание модальных окон похоже на создание диалогов, с той лишь разницей, что вместо .show( .showModal() используется .show() . Нет необходимости вносить какие-либо изменения в HTML-код.

(функция() {  
 	var dialog = document.getElementById('Диалог');
document.getElementById('showDialog').onclick = функция() {  
диалог. показать модальные(); 
};  
document.getElementById('closeDialog').onclick = функция() {  
диалог.закрыть();  
};
})();

В то время как диалоги по умолчанию отображаются с центрированием по горизонтали, модальные диалоги отображаются с центрированием по вертикали и горизонтали в окне просмотра. Кроме того, вы можете закрыть модальный диалог, нажав клавишу «Escape» .

Создание модального диалога

Добавление цвета фона модального диалога

Элемент <dialog> имеет псевдоэлемент под названием "::backdrop" , который работает только с модальными диалогами. Используя этот элемент, вы можете затемнить главную страницу, чтобы сообщить пользователям, что она недоступна. Вы можете позиционировать и стилизовать фон, используя стандартные свойства CSS:

 диалог::фон{
положение: фиксированное;
сверху: 0;
слева: 0;
справа: 0;
внизу: 0;
цвет фона: rgba (0, 0, 0, 0,7);
}

Добавление цвета фона модального диалога

Реализация <dialog> с формой

Форма может быть интегрирована с элементом <dialog> с помощью form method="dialog" . После отправки формы диалоговое окно закроется и вернет значение кнопки отправки через свойство dialog.returnValue .

Вот код HTML для диалога формы:





Вы согласны с условиями использования?

Используйте следующий JavaScript для диалогового окна формы.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('отправить').onclick = function() {
formDialog.close (значение);
};
document.getElementById('formDialog').addEventListener('close', function() {
оповещение (formDialog.returnValue);
});

Реализация <dialog> с формой

Примечание . Для лучшего понимания я использую formDialog вместо Dialog в своей демонстрации.

Если вы хотите увидеть элемент <dialog> в действии или поиграть с кодом, просмотрите живую демонстрацию здесь.

Заключение

С реинкарнацией элемента <dialog> разработчикам стало намного проще создавать диалоги без использования подключаемого модуля jQuery. Несмотря на то, что Chrome Canary и Safari 6.0 правильно интерпретируют элемент <dialog> , доступен полифилл, гарантирующий, что другие браузеры будут поддерживать этот элемент.

Если вы хотите узнать о других свойствах HTML5, вы можете ознакомиться с разделом «Введение в работу с файловым API HTML5» или узнать об атрибуте контекстного меню HTML5.