Spec-Zone.ru › Web APIs

HTMLDialogElement: метод close()

Базовая реализация Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

  • Подробнее
  • Полная совместимость
  • Отправить отзыв

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

Синтаксис

close()
close(returnValue)

Параметры

returnValue Необязательно

Строка, представляющая обновлённое значение HTMLDialogElement.returnValue диалогового окна.

Возвращаемое значение

Ничего (undefined).

Примеры

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

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" formnovalidate>X</button>
    <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 type="reset">Reset</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

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

<script>
  (() => {
    const updateButton = document.getElementById("updateDetails");
    const closeButton = document.getElementById("close");
    const 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", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    // Form close button closes the dialog box
    closeButton.addEventListener("click", () => {
      dialog.close("animalNotChosen");
      openCheck(dialog);
    });
  })();
</script>

Если бы кнопка «X» была type="submit", диалоговое окно закрылось бы без участия JavaScript. Отправка формы закрывает <dialog> вложенную в неё, если метод формы — dialog, поэтому кнопка «закрыть» не требуется.

Результат

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

Спецификация
HTML
# dom-dialog-close-dev

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

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
close 37 79 98 24 15.4 37 98 24 15.4 3.0 37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API