dialogを開けば背景は押せなくなる？showとshowModalを作例で比べよう

画面の上へ小さな説明を出したい。HTMLのdialogを使えば、開いた後の背景が自動で操作できなくなると思っていないかな。開く方法によって、その動きは違うよ。

このページでは同じdialogをshowとshowModalで開き、背景ボタンの回数が増えるかを比較する。HTMLとJavaScriptのボタン操作が分かる人向け。ブラウザだけで試せて、データ送信や本当の確認処理は行わないよ。

二つの開き方を区別する

モーダルは、その説明や入力へ操作を集中させるため、背後の内容を操作できなくする方式のこと。一方、モーダルではない表示では、開いたまま背景の操作も続けられるよ。

<dialog id="help" aria-labelledby="help-title">
  <h2 id="help-title">作例の説明</h2>
  <button type="button" id="close" autofocus>閉じる</button>
</dialog>

const dialog = document.querySelector('#help');
document.querySelector('#close').addEventListener('click', () => dialog.close());
dialog.show();      // モーダルではない開き方
dialog.close();     // 一度閉じる
dialog.showModal(); // モーダルとして開く

showはモーダルではない表示。同じ文書の背景にある操作を続けられる。showModalはトップレイヤーという特別な表示の層へ出し、同じ文書のdialogとその子孫以外を操作対象から外すんだ。

背景が暗く見えることと、操作できないことは同じではない。作例ではshowModalの背後へ半透明の背景も描くけれど、見た目だけを根拠にしないで、実際のボタン操作と状態を比べよう。

背景の回数を比べてみる

1. 開き方をshowにして、「説明を開く」を押す。
2. 開いたまま上側の「背景の回数を増やす」を押す。回数が増えることを見る。
3. dialog内の「閉じる」で、いったん表示を閉じる。
4. 開き方をshowModalへ変え、もう一度説明を開く。
5. 同じ作例内の背景ボタンを押しても、回数が増えないことを確認する。
6. dialog内の「閉じる」を押し、「最初から試す」でshow・回数0へ戻す。

表示欄のopenは開いているか、:modalへの一致はモーダルとして開いているかを示す。openがtrueという情報だけでは、この二つの方法を区別できないよ。

開いている種類を変える前に閉じる

すでにshowで開いているdialogへ、そのままshowModalを呼ぶと、InvalidStateErrorになる。逆にモーダルとして開いているものへshowを呼ぶ場合も、開き方の変更には気を付けよう。

作例は、開き直す前に開いていればcloseを呼ぶ。実際のアプリでも、表示状態を見ずにボタンから二つの方法を呼び分けないようにしたいね。

閉じるボタンは、見える名前を付けてdialogの中に置こう。作例では、開いたときにそのボタンへフォーカスするようautofocusを付けている。対応環境ではEscapeキーによるモーダルの閉じる要求も試せるけれど、キーボード操作だけに頼らず明示的な戻り道を用意する。

埋め込み作例は、記事全体を止めない

ここは大事な範囲の違いだよ。showModalが操作を止めるのは、そのdialogが入っている文書の中。iframeへ埋め込まれた作例なら、制限されるのは作例内の背景で、親の記事ページ全体ではない。

だから、記事側の「最初から試す」ボタンは別の文書にあり、作例を読み込み直せる。同じページに見えても、dialogがどの文書に属するかを分けて確認しよう。

編集部では2026年10月29日にMDNと照合し、showでの背景操作、showModalでの制限、閉じるボタン、Escape、フォーカスとリセットをブラウザで検証した。実アプリの送信や削除は行わないよ。ボタンとリンクの使い分け、z-indexと親の重なりも参考になるね。