HTMLDialogElement.open

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

Синтаксис

dialogInstance.open = true;
var myOpenValue = dialogInstance.open;

Значение

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

Свойство доступно только для чтения — значение можно установить программно методы show и hide элемента <dialog>.

Примеры

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

  <!-- 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');
        }
      }

      // Кнопка обновления открывает диалоговое окно
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

      // Кнопка отмены закрывает диалоговое окно
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });

    })();
  </script>

Примечание: Вы можете найти данный пример на htmldialogelement-basic (see it live also).

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

Specification Status Comment
HTML Living Standard
Определение 'open' в этой спецификации.
Живой стандарт  
HTML 5.1
Определение 'open' в этой спецификации.
Рекомендация  

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
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 Нет поддержки НетEdge Mobile ? 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>.

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, andSKLV
Обновлялась последний раз: mdnwebdocs-bot,