JavaScriptでモーダルウィンドウを実装する方法 クリックで表示されるモーダルウィンドウの作り方を初心者向けにわかりやすく解説



この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。

Webサイト改善・運用の総合ガイド｜速度・SEO・導線改善

モーダルウィンドウとは

モーダルウィンドウとは、画面上に重ねて表示されるポップアップのことです。
ユーザーの注意を引きたいときや、確認画面などによく使われます。

HTMLの基本構造

  

    
    
<button id="openModal">開く</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="closeModal">&times;</span>
    <p>ここに内容を表示</p>
  </div>
</div>
  

CSSの基本スタイル

  

    
    
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 300px;
}
  

JavaScriptの実装

  

    
    
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});
  

応用ポイント

背景クリックで閉じる

ユーザー体験を向上させるために、背景クリックでも閉じるようにすると便利です。

アニメーションを追加する

CSSでフェードインなどを追加すると、より自然な動きになります。

まとめ

モーダルウィンドウは、シンプルなJavaScriptで簡単に実装できます。
ユーザーの操作性を高めるためにも、ぜひ取り入れてみてください。



今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。

Webサイト改善・運用の総合ガイド｜速度・SEO・導線改善