このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS :modal 擬似クラス
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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>新しい乱数を見たいですか?</p>
<button id="showNumber">見せて</button>
<dialog id="favDialog">
<form method="dialog">
<p>ラッキーナンバー: <strong id="number"></strong></p>
<button>ダイアログを閉じる</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 id="favDialog">
<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 id="confirmBtn" value="default">確認</button>
</div>
</form>
</dialog>
<p>
<button id="updateDetails">詳細を更新</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> modally
updateButton.addEventListener("click", () => {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
outputBox.value = "このブラウザーはダイアログ API に対応していません。";
}
});
// "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()}`;
});
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # selector-modal |
| Selectors Level 4 # selectordef-modal |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
dialog要素- 他の要素表示状態擬似クラス:
:fullscreenおよび:picture-in-picture - 擬似クラスの一覧