Простое модальное окно на HTML5

Модальные окна используются на многих сайтах для удобства пользователю. Например, в форма подписки, в форме для входа на сайт, различные уведомления, чтобы обратить внимание посетителя на что-нибудь важное. И для того чтобы создать такое окно приходилось использовать плагин jQuery UI Dialog либо искать иные способы. Но в HTML5 есть специальный тег <dialog>, который позволяет создать «родное» модальное окно очень просто.

Чтобы увидеть работу данного окна необходимо в браузере Chrome, в адресной строке ввести «chrome://flags/» и включить следующую функцию «Включить экспериментальные функции веб-платформы» :

Поэтому данный пример вы сможете увидеть, только если сделаете шаги, которые описаны выше:

Посмотреть примерСкачать

HTML часть

Пользоваться данным элементом очень легко, нужно лишь в нужном месте написать:

1
2
3
4
5
6

<dialog id="window">
    <h3>Привееет!</h3>
    <p>Основной текст попап окна!</p>
    <button id="exit">Закрыть</button>
</dialog>
<button id="show">Показать</button>

Javascript часть

Но обратите внимание, что при просмотре в Chrome (который является единственным браузером, который поддерживает этот тег на данный момент) диалоговое окно скрыто. А с учетом HTML структуры, на странице мы увидим лишь кнопку «Показать». Для отображения диалогового окна нужно использовать JavaScript:

1
2
3
4
5
6
7
8
9

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

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/html5-dialog-window/