CSSの疑似要素::backdropの動作テストツール
dialog要素やPopover APIで表示される::backdrop疑似要素のスタイルをテストできます。
プレビュー
<dialog>要素（モーダル）と、Popover APIを使用した要素を用意しています。
<!-- dialog (JavaScriptが必要) -->
<button type="button" id="open-dialog-btn">dialog</button>
<dialog id="dialog">
<h2>dialog</h2>
<p>dialog要素のモーダルダイアログです。</p>
<p>::開く、閉じる動作はJavaScriptで制御します。</p>
<button type="button" class="close-btn" id="close-dialog-btn">Close</button>
</dialog>
<!-- div + popover (JavaScriptは不要)-->
<button type="button" popovertarget="div-popover" popovertargetaction="show">div + popover</button>
<div id="div-popover" popover>
<h2>div + popover</h2>
<p>popover属性を持つdiv要素でのダイアログです。</p>
<p>開く、閉じる動作はpopover APIで制御されています。</p>
<button type="button" class="close-btn" popovertarget="div-popover" popovertargetaction="hide">Close</button>
</div>
<!-- dialog + popover (JavaScriptは不要) -->
<button type="button" popovertarget="dialog-popover" popovertargetaction="show">dialog + popover</button>
<dialog id="dialog-popover" popover>
<h2>dialog + popover</h2>
<p>popover属性を持たせたdialog要素です。</p>
<p>開く、閉じる動作はpopover APIで制御されています。</p>
<button type="button" class="close-btn" popovertarget="dialog-popover" popovertargetaction="hide">Close</button>
</dialog>::backdrop 疑似要素を使って、ダイアログやPopover要素の「背景（バックドロップ）」のスタイルを指定します。
スタイル指定はすべて共通のものにしています。
/* 開くボタンのスタイル */
button {
width: 100%;
padding: 10px;
font-size: 16px;
cursor: pointer;
margin: 10px;
}
/* 閉じるボタンのスタイル */
.close-btn {
width: 100%;
padding: 10px;
font-size: 16px;
cursor: pointer;
margin: 10px auto;
}
/* ダイアログのスタイル */
#dialog, #div-popover, #dialog-popover {
padding: 2rem;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background: #fff;
}
/* ::backdrop のスタイル指定 */
::backdrop {
background-color: rgba(0, 0, 0, 0.85);
}ダイアログの表示やフルスクリーン化の制御を行います。
// dialogを開く
document.getElementById('open-dialog-btn').addEventListener('click', () => {
document.getElementById('dialog').showModal();
});
// dialogを閉じる（閉じるボタン）
document.getElementById('close-dialog-btn').addEventListener('click', () => {
document.getElementById('dialog').close();
});
// dialogを閉じる（全体）
document.getElementById('dialog').addEventListener('click', () => {
document.getElementById('dialog').close();
});
機能、使い方
dialog要素を使ったモーダルダイアログ、popover属性を使ったダイアログ、それぞれの動作を確認できます。::backdrop疑似要素を使った背景のスタイルを指定できます。::backdrop疑似要素について
::backdropは、以下の要素の直下に描画される背景レイヤーです。
dialog要素popover属性を持つ要素（Popover API）
dialog要素で開いたダイアログを閉じる際、背景部分（::backdrop）だけで動作させたい場合は、ダイアログ部分の範囲を取得、分岐させる方法になります。これは、::backdropが疑似要素のため直接クリックイベントのターゲットとして指定できないためです。
