<button class="btn" commandfor="my-dialog" command="show-modal">Show Modal Dialog</button>
<dialog id="my-dialog" class="dia">
	<p>I am the dialog</p>
	<button class="btn_close" type="button" commandfor="my-dialog" command="close">Close</button>
</dialog>
.box dialog::backdrop {
	background-color: rgba(235, 206, 255, 0.4);
}

<button class="btn" commandfor="my-popover" command="toggle-popover">Toggle Popover</button>
<dialog id="my-popover" popover class="dia">
	<p>I am the popover</p>
	<button class="btn_close" type="button" commandfor="my-popover" command="hide-popover">Hide</button>
</dialog>

CSSにおけるモーダルとポップオーバーの主な違いは、ユーザーの操作への影響度と、それに伴うデフォルトの振る舞いにあります。
・モーダルは、ユーザーの操作を強制的にモーダルウィンドウ内に限定します（モーダルな状態）。
・ポップオーバーは、メインコンテンツとの対話を妨げません（非モーダルな状態）。

モーダル (通常は<dialog>要素を使用)
モーダルが開いている間、背景のコンテンツは操作できません（操作がブロックされます）。
通常、明示的なアクション（閉じるボタンなど）が必要です。背景クリックで閉じることは基本的にはできません（実装によっては可能）。

ポップオーバー (popover属性を使用)
ポップオーバーが開いている間も、背景のコンテンツと操作を続けられます。
背景のどこかをクリックしたり、フォーカスを外したりすると自動的に閉じます（ライトディスミス）。