Всем привет! Наверняка на многих сайтах вы встречались с модальными окнами, различных баннеров, форм заполнения, приглашений подписаться и т. д. В html5 есть специальный тег dialog для создания модальных окон.

Допустим у нас есть небольшая форма подписки на сайте:

<dialog >
    <button id="none" style="float:right;" >x</button>
    <h3>Подписка</h3>
    <form action="/" method="post">
        <input type="email" placeholder="Введите ваш email" required>
        <br>
        <br>
        <input type="submit" style="text-align:center;" value="Оставить данные">
    </form>
</dialog>

и данную форму мы обернули в тег dialog. Изначально содержимое данного тега не отображается.

Создаем дополнительную кнопку и навешиваем на нее событие клика.

<button id="ok">Подписаться</button>
<script>
    var dialog = document.querySelector('dialog');
    document.querySelector('#ok').addEventListener('click', function(){
        dialog.showModal();
    });
    document.querySelector('#none').addEventListener('click', function(){
        dialog.close();
    });
</script>

Мы создали кнопку подписаться, а ниже написали небольшой js код. Вначале мы получаем элемент элемент dialog, а затем в зависимости от нажатой кнопки разворачиваем или сворачиваем модальное окно.

С помощью метода showModal() элемента dialog мы разворачиваем модальное окно. Обратите внимание модальное окно с нашей формой подписки появляется в самом центре страницы. Весь фон вокруг модального окна немного затемняется тем самым акцентируя внимание на самом окне.

C помощью псевдоселектора backdrop в css мы можем самостоятельно задавать фон вокруг модального окна:

dialog::backdrop {
    background: rgba(0,0,0,0.7);
}

Здесь в качестве фона мы задали черный цвет с прозрачностью 0.7

Метод close() элемента dialog сворачивает(закрывает) модальное окно.

Элемент dialog поддерживается во всех современных браузерах. Однако его методы showModal() и close() на данный момент поддерживаются только в браузерах webkit(google, opera).

Однако проявив немного изобретательности можно обойти данное ограничение:

var dialog = document.querySelector('dialog');
document.querySelector('#ok').addEventListener('click', function(){
    if(dialog.showModal){
        dialog.showModal();
    }else{
        dialog.style.display = "block";
    }
});
document.querySelector('#none').addEventListener('click', function(){
    if(dialog.close){
        dialog.close();
    }else{
        dialog.style.display = "none";
    }
});

Ничего не мешает нам проверить поддержку методов showModal() и close(). Если они не поддерживаются, используем просто значения свойства display(block - показать модальное окно или none - свернуть модальное окно). К сожалению псевдоселектор backdrop поддерживается пока только в браузерах webkit. Однако и здесь проявив смекалку можно обойти данное ограничение просто добавив строчку.

document.querySelector("body").style.background = 'rgba(0,0,0,0.7)';

Используя элемент dialog вам не придется писать стилей для позиционирования модального окна и предварительного его скрытия. И это может быть очень удобно.

На этом данная статья подошла к концу. Если у вам возникли вопросы оставляйте их в комментариях или группе

На этом я с вами прощаюсь. Желаю успехов и удачи! Пока!