← エラー辞典に戻る

HTML

dialogタグが表示されない

showModal()を呼んでいない

こんな症状

<dialog>タグを書いたのにモーダルが表示されない。dialog要素を初めて使うときに起きやすいよ。

まず試す

JSで dialog 要素の showModal() を呼んで表示する（閉じるのは close()）。

html
<dialog id="d"><p>内容</p></dialog>
<script>
  document.getElementById("d").showModal();
</script>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓HTMLに書いただけで表示されない
    → JSで showModal() を呼ぶ。
  • ✓モーダルにしたい（背景操作不可）
    → showModal() を使う（show() は非モーダルで背景操作可）。
  • ✓閉じたい
    → dialog.close() を呼ぶ。

なぜ起きる？

dialog要素はHTMLに書いただけではデフォルトで非表示（display: none相当）だよ。表示するにはJavaScriptでshowModal()メソッドまたはshow()メソッドを呼ぶ必要があるんだ。open属性を直接付けることもできるけど、モーダルとしての機能（背景のオーバーレイ等）は得られないよ。

✕ エラーが起きるコード
<dialog><p>内容</p></dialog>
<!-- showModal() 未呼出 -->
✓ 直したコード
<dialog id="d"><p>内容</p></dialog>
<script>d.showModal()</script>

✅ 直ったか確認

showModal() を呼んでモーダルが表示され、close() で閉じればOK。

🆘 まだ直らないときは

オーバーレイの見た目は ::backdrop 疑似要素でスタイルを変えられる。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A