HTMLDialogElement

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

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

Свойства

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

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

Методы

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

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

Примеры

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

  <!-- 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 Status Comment
HTML Living Standard
Определение 'HTMLDialogElement' в этой спецификации.
Живой стандарт  
HTML 5.1
Определение '<dialog>' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
HTMLDialogElement
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
cancel eventChrome Полная поддержка ДаEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera ? Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
close
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
close eventChrome Полная поддержка ДаEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera ? Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
open
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
returnValue
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
show
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
showModal
Экспериментальная
Chrome Полная поддержка 37Edge Нет поддержки НетFirefox Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания See bug 840640.
Отключено From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотри также

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