Лого SiteHere.ru

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

Простое модальное окно на 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/

2 комментария к записи
  • Саматакая

    Чё-то не работает ➡

     
    • Юрий

      А вы включили в Google Chrome «экспериментальные функции веб-платформы»?

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *