Элемент 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);
}
}