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).

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

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

BCD tables only load in the browser

Смотри также

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