Диалоговые окна (dialog)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 16
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Диалоговые окна — это неотъемлемая часть современных веб-интерфейсов. Они позволяют привлекать внимание пользователя к важной информации, запрашивать подтверждение действий или отображать формы без перезагрузки страницы. С появлением HTML5 для этих целей был введен семантический тег `<dialog>`. Он предоставляет встроенную функциональность для создания как простых, так и модальных окон. В этой серии заданий вы на практике научитесь создавать и настраивать диалоговые окна. Мы пройдем путь от создания базового скрытого диалога до реализации полноценного модального окна с формой и кнопками управления. Все это поможет вам лучше понять, как делать сайты более интерактивными и удобными для пользователя.
Список тем

Создание диалогового окна

id: 37875_dialog-1-create

Начнем с основ. Создайте простейшее диалоговое окно с текстом внутри. На этом этапе оно не будет видно на странице, но его структура уже будет присутствовать в коде и будет доступна для дальнейших манипуляций.

CSS
body {
  font-family: sans-serif;
  padding: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  min-width: 250px;
}
HTML
<input1>
  <p>Это содержимое диалогового окна.</p>
</input1>
Для создания диалогового окна используется семантический тег `<dialog>`. Это парный тег, поэтому не забудьте обернуть им содержимое и поставить закрывающий тег `</dialog>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Видимый диалог

id: 37875_dialog-2-open

По умолчанию диалоговые окна скрыты. Чтобы сделать диалоговое окно видимым сразу при загрузке страницы, необходимо добавить к тегу `<dialog>` специальный атрибут.

CSS
body {
  font-family: sans-serif;
  padding: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  min-width: 250px;
}
HTML
<dialog input1>
  <p>Это диалоговое окно видно по умолчанию.</p>
</dialog>
Чтобы диалоговое окно было видимым по умолчанию, используйте булевый атрибут `open`. Ему не требуется значение, достаточно просто указать его имя в открывающем теге.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Закрытие диалога с помощью формы

id: 37875_dialog-3-close

Диалоговые окна можно закрывать без JavaScript, используя стандартное поведение форм. Создайте внутри диалога форму и задайте ей специальный метод, чтобы кнопка внутри неё закрывала диалоговое окно.

CSS
body {
  font-family: sans-serif;
  padding: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  min-width: 250px;
}
form {
  margin-top: 15px;
  text-align: right;
}
button {
  padding: 8px 16px;
  border: 1px solid #6c757d;
  background-color: #6c757d;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
HTML
<dialog open>
  <p>Чтобы закрыть это окно, нажмите на кнопку.</p>
  <input1 method="input2">
    <button>Закрыть</button>
  </input1>
</dialog>
Внутри `<dialog>` разместите тег `<form>`. Укажите для него атрибут `method` со значением `dialog`. Любая кнопка (`<button>`) внутри такой формы автоматически получит функциональность закрытия родительского диалога.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Открытие модального окна

id: 37875_dialog-4-modal

Модальные окна блокируют взаимодействие с остальной страницей, акцентируя внимание пользователя. Чтобы открыть диалог в модальном режиме, нужно использовать JavaScript. Добавьте `id` к диалогу и вызовите правильный JS-метод в атрибуте `onclick` кнопки.

CSS
body {
  font-family: sans-serif;
  padding: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
  width: 90%;
  max-width: 320px;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
button {
  padding: 8px 16px;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
HTML
<button onclick="document.getElementById('confirmDialog').input1()">
  Показать модальное окно
</button>

<dialog input2="confirmDialog">
  <h3>Подтверждение</h3>
  <p>Вы уверены, что хотите продолжить?</p>
  <form method="dialog">
    <button>Да, уверен</button>
  </form>
</dialog>
Присвойте диалоговому окну атрибут `id` со значением `confirmDialog`. Затем в атрибуте `onclick` кнопки вызовите JavaScript-метод `showModal()` для этого элемента. Конструкция будет выглядеть так: `document.getElementById('confirmDialog').showModal()`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Структурирование контента

id: 37875_dialog-5-structure

Для лучшей семантики и доступности содержимое диалогового окна можно и нужно структурировать. Используйте теги `<header>` и `<footer>`, чтобы семантически отделить заголовок и блок с кнопками от основного контента.

CSS
body {
  font-family: sans-serif;
  padding: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0;
  width: 90%;
  max-width: 320px;
}
header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}
header h2 {
  margin: 0;
}
div.content {
  padding: 15px 20px;
}
footer {
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
button {
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}
button[value="cancel"] {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #333;
}
button[value="default"] {
  background-color: #dc3545;
  border: 1px solid #dc3545;
  color: white;
}
HTML
<dialog open>
  <input1>
    <h2>Удаление аккаунта</h2>
  </input1>
  <div class="content">
    <p>Это действие необратимо. Все ваши данные будут удалены.</p>
  </div>
  <input2>
    <form method="dialog">
      <button value="cancel">Отмена</button>
      <button value="default">Удалить</button>
    </form>
  </input2>
</dialog>
Оберните заголовок `<h2>` в тег `<header>`. Весь блок с формой и кнопками оберните в тег `<footer>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Передача значения при закрытии

id: 37875_dialog-6-return-value

Когда диалог закрывается через форму, кнопка, по которой кликнули, может передать свое значение. Это позволяет JavaScript определить, какое действие выбрал пользователь. Добавьте кнопкам атрибут для передачи значения.

CSS
body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
form button {
  margin: 0 5px;
  padding: 8px 16px;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
HTML
<dialog open>
  <form method="dialog">
    <p>Вы согласны с условиями?</p>
    <button input1="decline">Отклонить</button>
    <button input1="agree">Согласиться</button>
  </form>
</dialog>
Используйте атрибут `value` для каждой кнопки. Когда диалог закроется, его свойство `returnValue` (в JavaScript) будет равно значению атрибута `value` нажатой кнопки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексное модальное окно

id: 37875_dialog-7-complex

Соберем все вместе! Создайте полноценное модальное окно с формой настроек. Вам нужно добавить тег диалога, правильно оформить его подвал с кнопками и настроить кнопку для его модального открытия.

CSS
body {
  font-family: sans-serif;
}
dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 320px;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}
form {
  padding: 15px 20px;
}
footer {
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
label, input, select {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}
input, select {
  padding: 8px;
}
button {
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}
HTML
<button onclick="settingsDialog.input3()">Настройки</button>

<input1 id="settingsDialog">
  <header>
    <h3>Настройки профиля</h3>
  </header>
  <form method="dialog">
    <label for="nickname">Ваш ник:</label>
    <input type="text" id="nickname" value="User123">

    <label for="theme">Тема:</label>
    <select id="theme">
      <option>Светлая</option>
      <option>Темная</option>
    </select>
    
    <input2>
      <button value="cancel">Отмена</button>
      <button value="save">Сохранить</button>
    </input2>
  </form>
</input1>
Оберните всю внутреннюю часть в тег `<dialog>` с `id="settingsDialog"`. Блок с кнопками поместите в тег `<footer>`. В атрибуте `onclick` внешней кнопки используйте `settingsDialog.showModal()` для открытия диалога (когда элемент имеет `id`, к нему можно обращаться по этому имени как к переменной).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру