レスポンシブ対応の実装例＆コード付き！異なるデザインパターンのモーダルウィンドウを集めました！
JavaScriptは共通なので、以下よりご利用ください。
JavaScript コードはこちら（全デザイン共通）
// すべてのモーダルウィンドウにイベントリスナーを追加
document.addEventListener('DOMContentLoaded', function() {
// ページ内のすべてのモーダルボタンを取得
const modalButtons = document.querySelectorAll('[id^="modal-btn-"]');
modalButtons.forEach(modalBtn => {
// ボタンのIDから番号を抽出
const modalNumber = modalBtn.id.replace('modal-btn-', '');
const mask = document.querySelector(`#mask-${modalNumber}`);
const modal = document.querySelector(`#modal-${modalNumber}`);
// 要素が存在する場合のみイベントリスナーを追加
if (mask && modal) {
const closeBtn = modal.querySelector('.close-btn');
// モーダルを開く
modalBtn.addEventListener('click', () => {
mask.classList.add('appear');
modal.classList.add('appear');
});
// マスクをクリックして閉じる
mask.addEventListener('click', () => {
mask.classList.remove('appear');
modal.classList.remove('appear');
});
// 閉じるボタンをクリックして閉じる
if (closeBtn) {
closeBtn.addEventListener('click', () => {
mask.classList.remove('appear');
modal.classList.remove('appear');
});
}
}
});
});モーダルウィンドウとは？
モーダルウィンドウとは、ユーザーの操作を一時的に制限し、重要な情報の表示や入力を促すためのポップアップ表示です。背景が暗くなり、ウィンドウに注目が集まるのが特徴です。
目次
【1】シンプルモーダル
<div id="modal-container-1">
<button id="modal-btn-1">シンプルモーダル</button>
</div>
<div id="mask-1" class="mask"></div>
<div id="modal-1" class="modal">
<div class="modal-content">
<p>シンプルモーダル</p>
<p>基本的で使いやすいモーダルウィンドウです。シンプルなデザインで、どんなサイトにも合わせやすいです。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【2】カード風モーダル
<div id="modal-container-2">
<button id="modal-btn-2" class="modal-button">カード風モーダル</button>
</div>
<div id="mask-2" class="mask"></div>
<div id="modal-2" class="modal">
<div class="modal-content">
<p>【カード風モーダル】</p>
<p>カードのような見た目のモーダルウィンドウです。影付きで立体感があり、モダンな印象を与えます。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【3】グラデーションモーダル
<div id="modal-container-3">
<button id="modal-btn-3" class="modal-button">グラデーションモーダル</button>
</div>
<div id="mask-3" class="mask"></div>
<div id="modal-3" class="modal">
<div class="modal-content">
<p>【グラデーションモーダル】</p>
<p>美しいグラデーション背景のモーダルウィンドウです。カラフルで魅力的なデザインです。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【4】ミニマルモーダル
<div id="modal-container-4">
<button id="modal-btn-4" class="modal-button">ミニマルモーダル</button>
</div>
<div id="mask-4" class="mask"></div>
<div id="modal-4" class="modal">
<div class="modal-content">
<p>【ミニマルモーダル】</p>
<p>ミニマルで洗練されたモーダルウィンドウです。余計な装飾を省き、コンテンツに集中できるデザインです。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【5】ダークモーダル
<div id="modal-container-5">
<button id="modal-btn-5" class="modal-button">ダークモーダル</button>
</div>
<div id="mask-5" class="mask"></div>
<div id="modal-5" class="modal">
<div class="modal-content">
<p>【ダークモーダル】</p>
<p>ダークテーマのモーダルウィンドウです。目に優しく、夜間の使用にも適しています。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【6】ガラスモーフィズムモーダル
<div id="modal-container-6">
<button id="modal-btn-6" class="modal-button">ガラスモーフィズムモーダル</button>
</div>
<div id="mask-6" class="mask"></div>
<div id="modal-6" class="modal">
<div class="modal-content">
<p>【ガラスモーフィズムモーダル】</p>
<p>最新トレンドのガラス効果モーダルウィンドウです。半透明で上品なデザインです。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>【7】ネオン風モーダル
<div id="modal-container-7">
<button id="modal-btn-7" class="modal-button">ネオン風モーダル</button>
</div>
<div id="mask-7" class="mask"></div>
<div id="modal-7" class="modal">
<div class="modal-content">
<p>【ネオン風モーダル】</p>
<p>サイバーパンク風のネオン効果モーダルウィンドウです。インパクトのある演出が特徴です。</p>
<div class="close-btn-container">
<button class="close-btn">閉じる</button>
</div>
</div>
</div>