HTML5.2: dialog

Элемент dialog недавно был утверждён как стандарт, который уже можно пробовать использовать в некоторых браузерах. Для открытия нужно использовать JavaScript. У dialog есть два метода show()/showModal() и close().


<button type="button" class="button js-open">Открыть диалоговое окно</button>

<dialog class="dialog js-dialog">
    <h2>Заголовок</h2>
    <p>Это диалоговое окно.</p>
    <button type="button" class="button js-close">Закрыть</button>
</dialog>

<script>
    const dialog = document.querySelector('.js-dialog')
    const openButton = document.querySelector('.js-open')
    const closeButton = document.querySelector('.js-close')

    openButton.addEventListener('click', () => {
        dialog.showModal()
    })

    closeButton.addEventListener('click', () => {
        dialog.close()
    })
</script>

Если диалоговое окно должно быть открытым сразу, то используйте атрибут open.


<dialog open>

Если диалоговое окно содержит элементы формы, то нужно указать нужный параметр у формы.


<form method="dialog">

Окно можно кастомизировать.


    .dialog {
        min-width: 400px;
        padding: 25px;
        border: 0;
        border-radius: 10px;
        box-shadow: 0 2px 15px 0 rgba(0,0,0,0.1);
        background: #fafafa;
        animation: dialogSlide 0.3s;
    }

    .dialog::backdrop {
        background: rgba(0, 0, 0, 0.7);
        animation: dialogBackdropFade 0.2s;
    }

    @keyframes dialogSlide {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
    }

    @keyframes dialogBackdropFade {
        from {
            background: rgba(0, 0, 0, 0);
        }
    }

Смотреть демо.

Реклама