サイト制作

dialogのshowとshowModalは何が違う？背景を操作できるかで選ぶ

慈愛妃きづな

2026-11-01

この記事には広告・アフィリエイトリンクが含まれます。

dialog要素を表示する二つの方法は、見た目だけでなく周囲の操作に違いがあります。

背景の操作を止めたいかを決める

dialog要素をshowModal()で開くとモーダル表示になり、同じ文書内の背後の内容は操作できない状態になります。show()で開く場合は非モーダルで、周囲の操作を続けられます。確認に答えてから進んでほしい画面なのか、補助情報を見ながら作業したい画面なのかを先に決めましょう。

open属性を付けて表示しただけのdialogは、showModal()と同じ振る舞いにはなりません。背景を暗くするCSSを付けても、操作の制御まで同じになるわけではありません。モーダルが必要な場面では、そのための標準の開き方を使い、見た目だけで状態を判断しないことが大切です。

閉じるボタンなどからclose()を呼ぶ方法や、methodがdialogのフォームを使う方法があります。利用者がどう戻るかを分かるようにし、キーボード操作とフォーカスの移動も確認してください。Escなどの扱いは表示方法や設定にも関係するため、一つの操作だけに頼らない設計が安心です。

ダイアログを開く、内容を操作する、閉じて元の作業へ戻る、という一連の流れを対象ブラウザーで確認します。標準要素を使っても、独自のイベント処理が操作を妨げることはあります。情報を少し知らせるだけなら、作業を止めるモーダルが本当に必要かも考えてみましょう。