CSS-псевдокласс `:modal`

:modal CSS-псевдокласс соответствует элементу, который находится в состоянии, исключающем любое взаимодействие с элементами за его пределами до тех пор, пока взаимодействие не будет прекращено. Одновременно псевдоклассу :modal могут соответствовать несколько элементов, но активным и способным получать ввод будет только один из них.

Попробуйте

button {
  display: block;
  margin: auto;
  width: 10rem;
  height: 2rem;
}

:modal {
  background-color: beige;
  border: 2px solid burlywood;
  border-radius: 5px;
}

p {
  color: black;
}

<p>Would you like to see a new random number?</p>
<button id="showNumber">Show me</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>Lucky number is: <strong id="number"></strong></p>
    <button>Close dialog</button>
  </form>
</dialog>

const showNumber = document.getElementById("showNumber");
const favDialog = document.getElementById("favDialog");
const number = document.getElementById("number");

showNumber.addEventListener("click", () => {
  number.innerText = Math.floor(Math.random() * 1000);
  favDialog.showModal();
});

Синтаксис

:modal {
  /* ... */
}

Примечания по использованию

Примеры элементов, которые предотвращают взаимодействие пользователя с остальной частью страницы и которым соответствует псевдокласс :modal:

• Элемент dialog, открытый с помощью API showModal().
• Элемент, которому соответствует псевдокласс :fullscreen при открытии с помощью API requestFullscreen().

Примеры

Стилизация модального диалогового окна

В этом примере задаются стили для модального диалогового окна, которое открывается при нажатии кнопки «Обновить данные». В основе примера лежит <dialog> из примера.

<!-- Basic modal dialog containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
        >Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="updateDetails">Update details</button>
</p>
<output></output>

CSS

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

const updateButton = document.getElementById("updateDetails");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// If a browser doesn't support the dialog, then hide the
// dialog contents by default.
if (typeof favDialog.showModal !== "function") {
  favDialog.hidden = true;
  // Your fallback script
}
// "Update details" button opens the <dialog> modally
updateButton.addEventListener("click", () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    outputBox.value = "Sorry, the dialog API is not supported by this browser.";
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", () => {
  outputBox.value = `${
    favDialog.returnValue
  } button clicked - ${new Date().toString()}`;
});

Результат

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

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

См. также

• Элемент dialog
• Другие псевдоклассы состояния отображения элемента: :fullscreen и :picture-in-picture
• Полный список псевдоклассов