Введение
В этом лабе вы научитесь использовать HTML-тег <dialog> для создания модального окна или всплывающего окна на веб-странице. Мы проведем вас по шагам создания примера диалогового окна с помощью тега <dialog>.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Добавление тега
Тег <dialog> требует открывающего и закрывающего тегов. В этом шаге мы добавим базовую HTML-структуру и тег <dialog> в файл index.html.
<!doctype html>
<html>
<head>
<title>Modal Window using HTML dialog tag</title>
</head>
<body>
<h1>Modal Window using HTML dialog tag</h1>
<!-- Adding the dialog tag -->
<dialog>
<p>This is a sample dialog box!</p>
</dialog>
</body>
</html>
Добавление кнопки для открытия диалогового окна
В этом шаге мы создадим кнопку для открытия диалогового окна. Мы будем использовать JavaScript для открытия и закрытия диалогового окна при нажатии на кнопку.
<!doctype html>
<html>
<head>
<title>Modal Window using HTML dialog tag</title>
</head>
<body>
<h1>Modal Window using HTML dialog tag</h1>
<!-- Adding the dialog tag -->
<dialog id="dialog">
<p>This is a sample dialog box!</p>
</dialog>
<!-- Adding a button to open the dialog -->
<button onclick="document.getElementById('dialog').showModal()">
Open Dialog
</button>
<!-- Adding a button to close the dialog, which is hidden by default -->
<button onclick="document.getElementById('dialog').close()">
Close Dialog
</button>
</body>
</html>
Добавление стилей CSS к диалоговому окну
В этом шаге мы добавим несколько стилей CSS к диалоговому окну, чтобы оно выглядел более презентабельно.
<!doctype html>
<html>
<head>
<title>Modal Window using HTML dialog tag</title>
<!-- Adding styles for the dialog box -->
<style>
dialog {
width: 300px;
height: 150px;
background-color: #f2f2f2;
padding: 20px;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 0px 0px 10px #000;
font-family: Arial, san-serif;
font-size: 18px;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<h1>Modal Window using HTML dialog tag</h1>
<!-- Adding the dialog tag -->
<dialog id="dialog">
<p>This is a sample dialog box!</p>
</dialog>
<!-- Adding a button to open the dialog -->
<button onclick="document.getElementById('dialog').showModal()">
Open Dialog
</button>
<!-- Adding a button to close the dialog, which is hidden by default -->
<button onclick="document.getElementById('dialog').close()">
Close Dialog
</button>
</body>
</html>
Теперь наша HTML-код для создания модального окна с использованием HTML-тега <dialog> завершен.
Резюме
Вы успешно завершили лабу по созданию модального окна с использованием HTML-тега <dialog>. В этой лабе мы последовательно рассмотрели процесс создания примера диалогового окна с использованием HTML-тега <dialog>. Мы добавили простую кнопку для открытия и закрытия диалогового окна с помощью JavaScript. Кроме того, мы также добавили некоторые базовые стили CSS, чтобы улучшить внешний вид диалогового окна.
