よくある原因
AIへの指示が「モーダルを表示するボタンを作って」だけだと、開く処理と閉じる処理のセットが実装されないことがあります。AIは「表示」の指示には応えますが「閉じる」の要件を明示しないと省略することがあり、×ボタンはHTMLに存在するがclickイベントが未設定という状態になります。
AIが生成したモーダルで`class="modal hidden"`と`class="modal active"`を切り替える設計の場合、CSSに`.modal { display: none; }`と`.modal.active { display: flex; }`が必要ですが、`.hidden`のスタイルだけ定義されていて`.active`が未定義のままになるケースがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
生成されたHTMLを受け取ったら、閉じる動作に関わるコードを3か所確認します。①CSSに`display: none`の定義があるか、②JSに閉じる関数が定義されているか、③閉じるボタンに`onclick`またはイベントリスナーが設定されているか、の3点です。どれか欠けていれば閉じない問題が発生します。
動作確認は「開く→×ボタンで閉じる→再度開く」の一連の流れを必ず実行します。Consoleタブを開いた状態でこの動作を行い、エラーが出ない、かつモーダルが正しく開閉することを確認してからアップロードします。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手から「×を押しても閉じない」と言われたら、「背景（暗い部分）をクリックしても閉じませんか？」と確認します。背景クリックだけで閉じる実装の場合、×ボタンにはイベントが設定されていないことがあります。どちらで閉じようとしたかで原因が異なります。
相手が報告してきた症状を正確に把握するために「モーダルは開きましたか？開いた後に×ボタンをクリックして何が起きましたか？（何も変わらない/ページがリロードされた/エラーが出た）」と3択で確認すると、回答を得やすくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
モーダルを含むHTMLを依頼するプロンプトテンプレート：「インタラクティブなモーダルを作成してください。要件：①開くボタンでモーダルを表示、②×ボタンをクリックで閉じる、③モーダル外（背景）クリックで閉じる、④ESCキーで閉じる、⑤開閉ロジックはインラインJSで実装しCDN等外部依存なし、⑥開閉を2回繰り返しても正常に動作すること。」
生成後は`grep -n 'close\|hidden\|display'`でキーワードを確認し、閉じるロジックの実装漏れがないかを機械的にチェックします。このコマンドを共有前チェックに組み込むことで、AIの生成ミスを共有前に発見できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
プロンプトに細かく要件を書くとAIが長くて複雑なコードを生成してしまいます
「シンプルな実装にしてください。バニラJSのみ使用、CSS framework不使用、総行数100行以内を目標に」と追加すると、必要最小限のコードが生成されます。シンプルなコードほどバグが少なく修正も簡単です。
モーダルが閉じた後に別のモーダルを開くと2枚重なって表示されます
モーダルを開く関数が既存のモーダルを閉じずに新しいモーダルを生成している可能性があります。開く関数の先頭で`document.querySelectorAll('.modal').forEach(m => m.style.display='none')`を実行して既存を全て閉じてから開く実装に修正してください。
AIが生成したモーダルのESCキー対応を後から追加したいです
`document.addEventListener('keydown', function(e){ if(e.key==='Escape'){ document.getElementById('モーダルのID').style.display='none'; } });`をJSに追加します。既存コードのHTMLファイル末尾の`</script>`の前に挿入するのが最も簡単です。