Атрибут hidden тега <dialog>

Описание

Атрибут hidden скрывает диалоговое окно <dialog> от пользователя. В отличие от стандартного поведения <dialog>, который управляется методами show()/close(), атрибут hidden полностью удаляет элемент из доступности и потока документа.

Основные отличия:
Метод Видимость Доступность DOM
hidden Скрыт Удалён из дерева доступности Остаётся в DOM
Обычный <dialog> Скрыт Остаётся в дереве доступности Остаётся в DOM
Пример использования:
<dialog hidden id="hiddenDialog"> Этот диалог полностью скрыт и недоступен </dialog> <dialog id="normalDialog"> Этот диалог можно открыть методами show()/showModal() </dialog> <button onclick="toggleHiddenDialog()">Переключить hidden</button> <script> function toggleHiddenDialog() { const dialog = document.getElementById('hiddenDialog'); dialog.hidden = !dialog.hidden; console.log('Dialog hidden:', dialog.hidden); } </script>

Когда использовать:

  • Для временного скрытия диалога без возможности взаимодействия
  • Когда нужно полностью удалить диалог из дерева доступности
  • Для сложных сценариев управления видимостью
  • В сочетании с CSS-анимациями появления/исчезновения

Совместное использование с ARIA:

<dialog hidden aria-hidden="true" aria-labelledby="dialogTitle" id="accessibleDialog"> <h3 id="dialogTitle">Скрытый диалог</h3> <p>Этот диалог правильно скрыт для скринридеров</p> </dialog> <button onclick="showAccessibleDialog()">Показать</button> <script> function showAccessibleDialog() { const dialog = document.getElementById('accessibleDialog'); dialog.hidden = false; dialog.setAttribute('aria-hidden', 'false'); // Дополнительная логика для фокуса и управления } </script>

Особенности работы:

  • Эквивалентен CSS-правилу display: none
  • Не влияет на методы show()/showModal()
  • Не предотвращает программное взаимодействие с элементами диалога
  • Может использоваться вместе с CSS-переходами

Динамическое управление:

<dialog id="dynamicDialog"> <h3>Управляемый диалог</h3> <button onclick="hideDialog()">Скрыть полностью</button> <button onclick="this.closest('dialog').close()">Обычное закрытие</button> </dialog> <script> function hideDialog() { const dialog = document.getElementById('dynamicDialog'); dialog.hidden = true; // Дополнительные действия при скрытии } </script>

Рекомендации:

  • Используйте для диалогов, которые должны быть полностью выключены
  • Сочетайте с aria-hidden для лучшей доступности
  • Избегайте для часто используемых диалогов - лучше методы show()/close()
  • Учитывайте, что содержимое остаётся в DOM

Примечание: Хотя атрибут hidden может быть полезен в специфических сценариях, для большинства случаев работы с диалоговыми окнами предпочтительнее использовать стандартные методы управления видимостью через show(), showModal() и close().