この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
モーダルウィンドウとは
モーダルウィンドウとは、画面上に重ねて表示されるポップアップのことです。
ユーザーの注意を引きたいときや、確認画面などによく使われます。
「開く」をクリックしてください。
HTMLの基本構造
<button id="openModal">開く</button>
<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal">×</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で簡単に実装できます。
ユーザーの操作性を高めるためにも、ぜひ取り入れてみてください。
表示速度改善のご相談・診断は無料です。
サイト表示速度は、SEO・ユーザー離脱率・CV率にも大きく影響します。
画像最適化・CSS/JS最適化・サーバー設定など、原因は多岐にわたります。
act styleでは、WordPressやEC-CUBEの表示速度改善にも対応しています。
「サイトが重い」と感じたら、まずはお気軽にご相談ください。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。
このテーマを正しく理解するための基礎知識
この記事の理解を深めるための補足情報です。
関連する重要なポイントや基礎知識を整理してまとめています。