よくある原因
最も多い原因は、閉じるボタン（`×`）の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タブでオーバーレイ要素を特定して閉じる関数に追加してください。