---
title: "モーダルが閉じないときの原因と直し方"
description: "共有HTMLのモーダルが閉じないトラブルの原因と修正方法を解説。AI生成コードで起きやすいJSイベント未設定・display切り替えの誤り・z-index競合を症状別に整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/modal-not-closing-fix"
markdown: "https://giga-site.com/articles/modal-not-closing-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# モーダルが閉じないときの原因と直し方

モーダルウィンドウを閉じようとしてもボタンが反応しない、または背景クリックで消えない——このトラブルはAI生成HTMLでは頻繁に起きます。閉じるロジックのJSバグ、イベントリスナーの未設定、z-indexの競合が三大原因です。それぞれの修正手順を具体的に解説します。

> Source HTML: https://giga-site.com/articles/modal-not-closing-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

最も多い原因は、閉じるボタン（`×`）のclickイベントリスナーが登録されていないケースです。AIがHTMLとCSSを生成した後でJSを省略したり、`document.getElementById('close-btn')`が実行時にnullを返していてエラーになることがあります。DevToolsのConsoleに`Cannot read properties of null`が出ていれば、ID名の不一致が原因です。

モーダルの開閉をCSSの`display: none ↔ block`で切り替えているコードで、`!important`が重複指定されて閉じるJSが`display: none`を上書きできないパターンもあります。Stylesパネルでモーダルのdisplayプロパティを確認し、`!important`の競合を探してください。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

DevToolsのConsoleタブを開いてモーダルの×ボタンをクリックし、エラーメッセージが出るか確認します。エラーが出ない場合はSourcesタブで閉じるボタンのclickハンドラにブレークポイントを置き、クリック時に実際に実行されるかをステップ実行で確認します。

HTMLソースでモーダルの`id`と、JSの`getElementById`に渡しているIDが一致しているかを確認します。AIは変数名と要素IDを混同することがあり、たとえばHTMLが`id="modal-overlay"`でJSが`getElementById('modal')`となっている場合はnullになります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手から「モーダルが閉じない」と報告があったら「×ボタンをクリックしたときと、モーダル外（背景の暗い部分）をクリックしたときの両方で試してもらえますか？」と確認します。どちらかだけ動かない場合は、それぞれ別のJSが担当している可能性があり、修正箇所が絞り込めます。

「F12→Consoleを開いた状態で×ボタンを押して、何かエラーが出るか教えてください」と依頼します。エラーが出なくて閉じない場合は、閉じるロジック自体が動いていない（または`display`プロパティが変わっていない）可能性が高いです。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

AIへのプロンプトでモーダルを依頼する際は「開く/閉じるJSはインラインonclickで実装し、外部ファイルに依存しないこと。モーダルの表示切り替えは`classList.add/remove('hidden')`で行い、CSS `!important`を使わないこと。閉じるボタンのID名とJSで参照するIDが一致していることを確認すること」と指定します。

完成後は「モーダルを開く→×ボタンで閉じる→再度開く→背景クリックで閉じる」の4ステップを必ず自分で確認します。この動線を一度通すだけで大半の不具合を事前に発見できます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### モーダルを閉じると背景のスクロールも止まってしまいます

モーダルを開くときに`document.body.style.overflow = 'hidden'`を設定している場合、閉じるときに`document.body.style.overflow = ''`に戻すのを忘れているのが原因です。閉じるロジックに1行追加してください。

### ESCキーでモーダルを閉じたいのですがどう実装しますか？

`document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });`をJSに追加します。AIに「ESCキーでも閉じられるようにしてください」と指示すると生成してくれます。

### モーダルが閉じた後も背景のオーバーレイ（暗い幕）が残ります

閉じるロジックでモーダル本体は`display: none`にしているがオーバーレイ要素を別要素で管理していて、そちらの非表示処理が漏れているケースです。DevToolsのElementsタブでオーバーレイ要素を特定して閉じる関数に追加してください。

## 関連記事

- [モーダルが閉じないときに共有前に確認するチェックリスト](https://giga-site.com/articles/modal-not-closing-checklist/index.md)
- [モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/modal-not-closing-ai-prompt/index.md)
- [モーダルが閉じないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/modal-not-closing-request-message/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
- [SVGが表示されないときの原因と直し方](https://giga-site.com/articles/svg-not-showing-fix/index.md)
- [WebP画像が表示されないときの原因と直し方](https://giga-site.com/articles/webp-not-showing-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "モーダルが閉じないときの原因と直し方",
  "description": "共有HTMLのモーダルが閉じないトラブルの原因と修正方法を解説。AI生成コードで起きやすいJSイベント未設定・display切り替えの誤り・z-index競合を症状別に整理します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/modal-not-closing-fix",
  "url": "https://giga-site.com/articles/modal-not-closing-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "モーダルを閉じると背景のスクロールも止まってしまいます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "モーダルを開くときに`document.body.style.overflow = 'hidden'`を設定している場合、閉じるときに`document.body.style.overflow = ''`に戻すのを忘れているのが原因です。閉じるロジックに1行追加してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ESCキーでモーダルを閉じたいのですがどう実装しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "`document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });`をJSに追加します。AIに「ESCキーでも閉じられるようにしてください」と指示すると生成してくれます。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルが閉じた後も背景のオーバーレイ（暗い幕）が残ります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "閉じるロジックでモーダル本体は`display: none`にしているがオーバーレイ要素を別要素で管理していて、そちらの非表示処理が漏れているケースです。DevToolsのElementsタブでオーバーレイ要素を特定して閉じる関数に追加してください。"
      }
    }
  ]
}
```