:modal

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.

:modal はCSS の擬似クラスで、操作が解除されるまで、それ以外の要素とのすべての操作を除外する状態にある要素と一致します。:modal 擬似クラスを使用して、複数の要素を同時に選択することができますが、アクティブになり、入力を受け付けることができるのはそのうちの 1 つのみです。

試してみましょう

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>Show me</button><dialog>  <form method="dialog">    <p>Lucky number is: <strong></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();});

構文

css

:modal {  /* ... */}

使用上のメモ

ページの他の部分をユーザーが操作できないようにし、:modal 擬似クラスによって選択される要素の例としては、例えば以下のようなものが含まれます。

dialog 要素がshowModal() API で開かれたとき。
requestFullscreen() API で開かれたときに:fullscreen 擬似クラスで選択される要素。

例

モーダルダイアログのスタイル設定

この例では、「詳細を更新」ボタンがアクティブ化された際に開くモーダルダイアログにスタイル設定を行なっています。この例は、<dialog> 要素の例を基に構築されています。

<!-- フォームを含む基本的なモーダルダイアログ --><dialog>  <form method="dialog">    <p>      <label        >好きな動物:        <select>          <option value="default">選択してください…</option>          <option>アルテミア</option>          <option>レッサーパンダ</option>          <option>クモザル</option>        </select>      </label>    </p>    <div>      <button value="cancel">キャンセル</button>      <button value="default">確認</button>    </div>  </form></dialog><p>  <button>詳細を更新</button></p><output></output>

CSS

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> modallyupdateButton.addEventListener("click", () => {  if (typeof favDialog.showModal === "function") {    favDialog.showModal();  } else {    outputBox.value = "このブラウザーはダイアログ API に対応していません。";  }});// "Favorite animal" input sets the value of the submit buttonselectEl.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()}`;});