13.10.2022 в 18:19
Тим Тоуди
Тег HTML5 Dialog: самый простой способ создать модальное окно.
Тег диалога HTML5 — это самый простой способ создать модальное окно. Все, что вам нужно сделать, это добавить тег на свою страницу, и все готово. Затем вы можете стилизовать диалоговое окно с помощью CSS и добавить к нему поведение с помощью JavaScript.
Что такое тег dialog в html?
Тег <dialog /> в HTML используется для создания всплывающего диалогового окна на веб-странице.
Тег <dialog /> определяет диалоговое окно или окно. Этот элемент можно использовать для отображения предупреждающего сообщения, подтверждающего сообщения или всего, что требует от пользователя ответа.
Давайте посмотрим на небольшой пример
- Сначала создадим 3 файла: index.html, main.js и style.css.
- В index.html напишите этот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Francisco Inoque">
<title>The easiest way to do modal.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn-open" id="btn-open">Open modal</button>
<dialog id="modal">
<h1>Dialog Tag</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatibus accusantium enim provident distinctio fugiat, ex cumque pariatur consequatur repellat, aliquid voluptatem possimus. Inventore a quia consequatur fuga maxime exercitationem.
</p>
<button id="btn-close" class="btn-close">Close modal</button>
</dialog>
<script src="./main.js"></script>
</body>
</html>- В main.js напишите этот код:
const btnOpen = document.querySelector("#btn-open");
const btnClose = document.querySelector("#btn-close")
const modal = document.querySelector("#modal");
btnOpen.onclick = () => {
modal.showModal()
}
btnClose.onclick = () => {
modal.close()
}- В style.css напишите такой код:
dialog::backdrop {
background-color: rgba(0 0 0 / .3);
}
dialog {
width: 20%;
border: none;
border-radius: 14px;
box-shadow: 0 0 0 .6em rgb( 0 0 0 / .3)
}
.btn-open {
position:absolute;
margin: 25% auto 0;
left:45%;
background-color: #8e2ddd;
color: #fff;
border: none;
border-radius: 14px;
padding: 1.5em;
font-size: 18px;
font-weight: bold;
cursor: pointer
}
.btn-close {
background-color: #ff0099;
color: #fff;
border: none;
border-radius: 10px;
padding: .8em;
font-size: 13px;
font-weight: bold;
cursor: pointer
}В статье мы рассмотрели, как сделать нашу страницу сайта более интересней с помощью всплывающего диалогового окна
