Webサイトにポップアップ（モーダル）を実装する2つの方法
Webサイトを運営していると、お知らせやクーポン、会員登録などを目立たせて表示したい場面がありますよね。そんな時に活躍するのが「ポップアップ（モーダルウィンドウ）」です。
この記事では、Webサイトにポップアップを実装するための代表的な2つの方法を、デモとサンプルコード付きで分かりやすく解説します。
方法1：jQueryを使った基本的な実装
まずは、JavaScriptライブラリである「jQuery」を使った、最も一般的で柔軟性の高い実装方法です。特定の要素（ボタンやリンク）がクリックされたことを検知し、CSSで隠しておいたポップアップ要素に「open」クラスを追加して表示させます。
デモ
HTML
ポップアップを開くための「トリガー」となる要素（今回は<a>タグ）と、ポップアップ本体の要素（.js_popup1）を用意します。トリガー側にはdata-popupName属性で、対応するポップアップ本体のクラス名を指定しておくのがポイントです。
<!-- ▼トリガーとなる表示要素 -->
<a data-popupName="js_popup1" class="js_popupOpen">クリックすると開きます</a>
<!-- ▼POPUP本体の要素 -->
<div class="js_popup1 popup ">
<div class="popupPlate">
<div class="text_area">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<a class="popupClose">閉じます</a>
</div>
<div class="popupBgi"></div>
</div>CSS (SCSS)
ポップアップの見た目を整えます。普段（.openクラスがない状態）はopacity: 0;とz-index: -2;で非表示にしておき、.openクラスが付与されたらopacity: 1;とz-index: 90;で最前面に表示されるように設定しています。
.popup {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,.6);
//初期状態（非表示）
opacity:0; z-index: -2; transition: opacity 0s;
//クリックされたら（表示状態）
&.open {
opacity: 1;
z-index: 90;
transition: opacity 0.2s;
}
//背景
.popupBgi {
position: absolute; top: 0; left: 0; z-index: 50;
width: 100%; height: 100%;
}
//POPUPの中身（レイアウトは自由に調整してください）
.popupPlate {
margin: 0 auto;
padding: 4.6875% 6.25%;
position: absolute; top: 50%; left: 50%;
z-index: 60;
transform: translate(-50%,-50%); //上下左右中央揃えのテクニック
width: 90%; max-width: 1000px;
background: #fff; text-align: center;
//閉じるボタン
.popupClose {
padding: .5em 1em;
border: solid 1px #fff;
display: inline-block;
position: absolute; bottom: 0; left: 50%;
transform: translate( -50%,150%);
background: rgba(#000,.5);
color: #fff; // 文字色を追加
text-align: center;
cursor: pointer; // カーソルを追加
}
}
}JavaScript (jQuery)
jQueryを使用して、クリックイベントを処理します。※別途jQuery本体を読み込んでいる必要があります。
$(function() {
$('.js_popupOpen').on('click',function(){
// 1. クリックされた要素の「data-popupName」属性を取得
var dname = $(this).attr('data-popupName');
// 2. 取得した名前（dname）を持つクラスに「.open」クラスを追加して表示
$('.'+dname).addClass('open');
// 3. 「背景」または「閉じるボタン」がクリックされたら
$('.popupBgi, .popupClose').click(function(){
// ポップアップから「.open」クラスを削除して非表示に
$('.popup').removeClass('open');
});
});
});
この方法のメリットは、アニメーションを細かく制御したり、複数のポップアップを管理したりするのが容易な点です。
方法2：HTMLとCSSのみ（JavaScript不要）で実装
「JavaScriptは使いたくない」「もっと手軽に実装したい」という場合には、HTMLのチェックボックスとCSSの:checked疑似クラスを利用する方法もあります。
これは、チェックボックス（input）がチェックされた状態かどうかをCSSで判別し、表示・非表示を切り替えるテクニックです。<label>タグと<input>タグをfor属性とid属性で関連付けることが重要です。
デモ
HTML & CSS
この方法の肝は、input要素（チェックボックス）の状態（:checked）に応じて、その後ろにある.popup要素のスタイルをCSSで変更する点です。「閉じる」ボタンも<label>タグにし、for属性で同じinput（チェックボックス）を指定することで、クリックするとチェックが外れる（＝ポップアップが閉じる）仕組みを作っています。
チェックボックスは表示しなくても…そんな時は、cssに以下を追加するだけ！
[type="checkbox"] {
display: none;
}
まとめ
今回は、Webサイトにポップアップを実装する2つの方法をご紹介しました。
| jQuery版 | CSSのみ版 |
|---|---|
| 複雑な表示制御や複数のポップアップ管理に向いています。 | JavaScriptを使わずに手軽に実装したい場合におすすめです。 |
どちらの方法も一長一短ありますので、あなたのWebサイトの目的や技術的な要件に合わせて選んでみてくださいね。
よくある質問（FAQ）
- ポップアップが画面の中央にきれいに表示されません。
- 画面の上下左右中央に配置するには、CSSの
position: absolute;（またはfixed;）とtransform: translate(-50%, -50%);を組み合わせるテクニックが便利です。記事中のCSS（.popupPlateのスタイル）のように、top: 50%;とleft: 50%;で要素の左上を画面中央に移動させた後、transformで要素自身の幅と高さの半分だけ戻すことで、要素の中心が画面の中心と一致します。 - ポップアップを実装する際に気をつけるべき点はありますか？
- ユーザビリティ（UX）への配慮が非常に重要です。ポップアップはユーザーの操作を妨げる可能性があるため、以下の点に注意しましょう。
- 閉じやすくする: 「閉じる」ボタンや背景クリックで簡単に閉じられるようにする。
- 表示タイミング: ページ訪問後すぐではなく、ユーザーがコンテンツを少し読んでから表示するなど、タイミングを工夫する。
- 頻度: 同じユーザーに何度も表示しないよう、Cookieなどで制御する。
- jQuery版で、ポップアップの中身（.popupPlate）をクリックしても閉じてしまいます。
- 記事のサンプルコード（方法1）では、閉じる処理を
$('.popupBgi, .popupClose').click(...)で指定しています。もし$('.popup').click(...)のようにポップアップ全体にクリックイベントを設定すると、中身（.popupPlate）をクリックしても親要素（.popup）のイベントが反応して閉じてしまいます（イベントのバブリング）。背景（.popupBgi）と閉じるボタン（.popupClose）だけにイベントを設定するか、イベントバブリングを停止する処理（e.stopPropagation()など）を追加する必要があります。
