HTMLDialogElement

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

HTMLDialogElement - интерфейс взаимодействия, предоставляющий методы для управления <dialog> элементами. Он наследует свойства и методы от HTMLElement.

Свойства

Наследует свойства от своего родителя, HTMLElement.

HTMLDialogElement.open: Boolean (en-US) отражает HTML атрибут элемента open, указывающий на то, доступно ли диалоговое окно для воздействия.
HTMLDialogElement.returnValue (en-US): DOMString устанавливает или возвращает передаваемое диалоговому окну значение.

Методы

Наследует методы своего родителя, HTMLElement.

HTMLDialogElement.close() (en-US): Закрывает диалоговое окно. Опциональный DOMString может быть передан как аргумент, обновляющий returnValue диалогового окна.
HTMLDialogElement.show() (en-US): Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.
HTMLDialogElement.showModal() (en-US): Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.

Примеры

Примеры ниже показывают простую кнопку, которая при нажатии открывает <dialog>, содержащий элемент <form>, используя метод HTMLDialogElement.showModal() (en-US). Вы можете нажать кнопку Отмены, чтобы закрыть диалоговое окно (используя функцию HTMLDialogElement.close() (en-US)), или принять форму, использую кнопку Принятия.

  <!-- Simple pop-up dialog box, containing a form -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
        <p><label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select></p>
      </section>
      <menu>
        <button id="cancel" type="reset">Cancel</button>
        <button type="submit">Confirm</button>
      </menu>
    </form>
  </dialog>

  <menu>
    <button id="updateDetails">Update details</button>
  </menu>

  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if(dialog.open) {
          console.log('Dialog open');
        } else {
          console.log('Dialog closed');
        }
      }

      // Update button opens a modal dialog
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

      // Form cancel button closes the dialog box
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });

    })();
  </script>

Note: You can find this example on GitHub as htmldialogelement-basic (see it live also).

Спецификации

Specification
HTML Standard (HTML) # htmldialogelement

Browser compatibility

BCD tables only load in the browser

Смотрите также

HTML-элемент, реализующий этот интерфейс взаимодействия: <dialog>.

Nov	DEC	Jan
	08
2020	2021	2022