AIでモーダルウィンドウを作る【CSS＋JS生成】

ボタンを押すと画面中央にポップアップで表示されるモーダルウィンドウ。お問い合わせ確認や画像拡大など、様々な場面で使われます。AIに依頼して作ってみましょう。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のHTMLに対して、
・「詳細を見る」ボタンを押すとモーダルが開くJavaScript
・モーダルの見た目（背景オーバーレイ、中央配置、×ボタン）のCSS
・オーバーレイまたは×ボタンで閉じる機能
を追加してください。

<button id="openModal">詳細を見る</button>

<div id="modal" class="modal">
  <div class="modal-inner">
    <button class="modal-close">&times;</button>
    <h2>詳細情報</h2>
    <p>ここにコンテンツが入ります。</p>
  </div>
</div>

生成されたCSS例

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal.is-open {
  display: flex;
}
.modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  position: relative;
  animation: fadeUp 0.3s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b6b6b;
  line-height: 1;
}

生成されたJS例

const modal = document.getElementById('modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.querySelector('.modal-close');

openBtn.addEventListener('click', () => modal.classList.add('is-open'));
closeBtn.addEventListener('click', () => modal.classList.remove('is-open'));
modal.addEventListener('click', e => {
  if (e.target === modal) modal.classList.remove('is-open');
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

モーダルウィンドウをHTML・CSS・JavaScriptでゼロから作ってください。
・開くボタンはページ上に配置
・モーダル内には画像・タイトル・テキスト・閉じるボタン
・背景を暗くするオーバーレイ付き
・フェードアニメーションで表示

ポイント

• スクロールを止めたい場合は「モーダルが開いている間、背景のスクロールを止める処理も追加してください」とAIに追加依頼できます
• ESCキーで閉じる機能も「Escキーでも閉じるようにして」と伝えるだけで追加してもらえます