---
title: "モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでモーダルが閉じない問題を防ぐプロンプトの書き方を解説。×ボタン・背景クリック・ESCキーの3つの閉じ方を網羅した指示文テンプレートと、生成後の検証手順を紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/modal-not-closing-ai-prompt"
markdown: "https://giga-site.com/articles/modal-not-closing-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト

AIにモーダルUIを含むHTMLを生成させると、開く処理は正しくても閉じるロジックが抜けているケースが多くあります。プロンプトの書き方を変えるだけで生成段階から閉じる動作まで完成させることができ、共有後の「モーダルが閉じない」問題を防げます。

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

## よくある原因

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>`の前に挿入するのが最も簡単です。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト",
  "description": "AI生成HTMLでモーダルが閉じない問題を防ぐプロンプトの書き方を解説。×ボタン・背景クリック・ESCキーの3つの閉じ方を網羅した指示文テンプレートと、生成後の検証手順を紹介します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/modal-not-closing-ai-prompt",
  "url": "https://giga-site.com/articles/modal-not-closing-ai-prompt",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "プロンプトに細かく要件を書くとAIが長くて複雑なコードを生成してしまいます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「シンプルな実装にしてください。バニラJSのみ使用、CSS framework不使用、総行数100行以内を目標に」と追加すると、必要最小限のコードが生成されます。シンプルなコードほどバグが少なく修正も簡単です。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルが閉じた後に別のモーダルを開くと2枚重なって表示されます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "モーダルを開く関数が既存のモーダルを閉じずに新しいモーダルを生成している可能性があります。開く関数の先頭で`document.querySelectorAll('.modal').forEach(m => m.style.display='none')`を実行して既存を全て閉じてから開く実装に修正してください。"
      }
    },
    {
      "@type": "Question",
      "name": "AIが生成したモーダルのESCキー対応を後から追加したいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "`document.addEventListener('keydown', function(e){ if(e.key==='Escape'){ document.getElementById('モーダルのID').style.display='none'; } });`をJSに追加します。既存コードのHTMLファイル末尾の`</script>`の前に挿入するのが最も簡単です。"
      }
    }
  ]
}
```