Простое создание модального окна с помощью элемента HTML5 dialog

Модальное окно – один из наиболее часто используемых элементов пользовательского интерфейса, который мы можем найти на веб-сайтах всемирной паутины.

Оно часто используется, чтобы отобразить форму подписки, форму для загрузки файла (как например в WordPress), для отображения уведомлений и в других случаях, когда требуется привлечь внимание пользователя к чему-то важному.

Модальное окно

В настоящее время чаще всего для отображения модальных окон используются плагины jQuery, например jQuery UI Dialog, Twitter Bootstrap Modal, или Popeasy.

Однако в HTML5 представлен новый тэг , который позволяет нам создать настоящее модальное окно гораздо более простым способом.

Использование элемента dialog

Использование элемента <dialog> ничем не отличается от использования других элементов HTML.

Достаточно просто добавить контент, который мы желаем отобразить внутри модального окна:

<dialog id="window">  
    <h3>Hello World!</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>  
    <button id="exit">Выйти</button>  
</dialog>  
<button id="show">Показать диалоговое окно</button>

Однако заметьте, что когда вы откроете этот пример в Google Chrome (единственный браузер, который на данный момент поддерживает тэг dialog), диалоговое окно по умолчанию скрыто.

И приведённый выше HTML код отобразит только кнопку «Показать диалоговое окно». Чтобы отобразить диалоговое окно, мы можем использовать JavaScript.

(function() {  
    var dialog = document.getElementById('window');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('exit').onclick = function() {  
        dialog.close();  
    };  
})();

Нажмите на кнопку «Показать диалоговое окно», и оно отобразиться посередине окна браузера.

диалоговое окно

Мы можем настроить вид диалогового окна с помощью CSS. По умолчанию оно растянуто на всю ширину окна браузера, поэтому давайте определим его ширину.

dialog {  
    width: 500px;  
}

Также элемент <dialog> имеет псевдо-элемент ::backdrop. Он используется, чтобы настроить затемнение фона, которое обычно применяется при отображении модальных окон.

Оно помогает посетителям сконцентрироваться на диалоговом окне и скрыть всё, что расположено за ним. Судя по всему, на данный момент эта опция не реализована, однако будет поддерживаться в будущем.

Заключение

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

Пожалуйста, учтите, что этот элемент является экспериментальным и ещё не готов для использования повсеместно. Пока он работает только в браузере Google Chrome с включённой на странице chrome://flags/ опцией Experimental Features.

Перевод статьи «Creating Modal Window Easily With HTML5 Dialog» был подготовлен дружной командой проекта Сайтостроение от А до Я.