CSSでポップアップウィンドウを表示する

CSSやJSを使ったポップアップ効果を出すサンプルおよびコードを紹介しています。

CSSのみで実現する場合はinputのcheckboxのON・OFFを使ったものがCSSで制御しやすく便利です。

JSも使う場合は、closedクラスを付け外しする形が簡単に実現できます。

CSSでポップアップウィンドウを表示する

本記事ではCSSを使ってポップアップ表示を実現する方法をご紹介します。

CSSだけで実現する場合は、checkboxを使ってON・OFFを切り替える形が簡単だと思います。

JSを使えば品のあるポップアップ演出ができますが、JSの実装はできるだけ簡単な方が良いですよね。

そこで本サンプルでは、HTMLソース上に直接JSを書いていますのでそのままコピペできます。

モーダルウィンドウと似たような形になりますが、モーダルウィンドウについては別記事をご覧ください。

ポップアップ表示（CSSのみ）

まずはCSSのみで実現するタイプです。

inputのlabelタグを2つ付けて、それぞれでチェックを入れたり消したりします。

構成ソース

HTML

<label class="open" for="pop-up">ポップアップ表示</label> <input type="checkbox" id="pop-up"> <div class="overlay"> <div class="window"> <label class="close" for="pop-up">閉じる</label> <h4>ポップアップウィンドウ</h4> <p>この窓が表示されている間は窓の外の操作はできません。ウィンドウを閉じて操作して下さい。</p> </div> </div>

一つのinputに対し、labelタグが2つあるのがわかりますね。

formタグはありませんが、チェックをON・OFFするだけなので問題はありません。

CSS

.open { cursor:pointer; } #pop-up { display: none; } .overlay { display: none; } #pop-up:checked + .overlay { display: block; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6); } .window { position: fixed; top: 50%; left: 50%; width: 90vw; max-width: 360px; padding: 20px; height: 300px; background-color: #fff; border-radius: 4px; align-items: center; transform: translate(-50%, -50%); } .close { position: absolute; top: 4px; right: 4px; cursor:pointer; }

チェックマークは見える必要が無いので、inputごと非表示にしています。

#pop-up:checked + .overlay の部分がチェックが入った時のスタイルで、本サンプルのキモとなるところです。

サンプル

ポップアップ表示（押して下さい）

ポイントは「checkboxへのON・OFF」

サンプルの通り、checkboxにチェックが入った時とそうでない時でウィンドウ表示を分岐しています。

チェックON・OFF時のスタイル設定

labelを2つにしているのは、一つのcheckboxを付け外しするためですね。

ON・OFFは交互に作用

チェックのON・OFFは必ず交互になるようになっています。

ポップアップ表示中のチェックONのlabelは、操作不可の背景の下にあるので押せません。

逆にチェックがOFFの時は、ウィンドウ自体が表示されていないのでONにするしかないという訳です。

ポップアップ表示（CSS+JS）

次はJSを使ったbuttonによる表示切替のパターンです。

別途JSファイルを用意しなくても良いように、直接ソース上にscriptを書いています。

構成ソース

HTML

<div class="modal-overlay closed" id="modal-overlay"></div> <div class="modal closed" id="modal"> <button class="close-button" id="close-button">閉じる</button> <div class="modal-guts"> <h4>ポップアップウィンドウ</h4> <p>この窓が表示されている間は窓の外の操作はできません。ウィンドウを閉じて操作して下さい。</p> </div> </div> <button id="open-button" class="open-button">ポップアップ表示</button>

一番下のbuttonが表示ボタン、ウィンドウ内にもう一つ閉じる用のbuttonが用意されています。

CSS

.modal { display: block; width: 600px; max-width: 100%; height: 300px; position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); /* margin: -200px 0 0 -200px; */ background: white; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9); } .closed { display: none; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background: rgba(0, 0, 0, 0.6); } .modal-guts { position: absolute; top: 0; left: 0; width: 100%; overflow: auto; padding: 20px 50px 20px 20px; } .modal .close-button { position: absolute; z-index: 1; top: 10px; right: 20px; border: 0; background: black; color: white; padding: 5px 10px; font-size: 1.3rem; } .open-button { border: 0; background: lightgreen; color: white; padding: 10px 20px; border-radius: 10px; font-size: 21px; }

ウィンドウ用と操作不可用の黒背景用のパネルCSSを設定するのは、先ほどのサンプルと同じです。

.closedクラスがdisplay: none;を持ち、このクラスを「付け外し」して各要素を制御します。

JS

<script> var modal = document.querySelector("#modal"); var modalOverlay = document.querySelector("#modal-overlay"); var closeButton = document.querySelector("#close-button"); var openButton = document.querySelector("#open-button"); //閉じるボタン closeButton.addEventListener("click", function () { modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); }); //開くボタン openButton.addEventListener("click", function () { modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); }); </script>

上記JSでは、開くボタン・閉じるボタンの両方に対し同じ命令が記述されています。

HTML上にscriptとして直接記載するためのソースですが、JSファイルに分けても良いです。

サンプル

ポップアップ表示

ポイントは「closedの付け外し」

buttonを使った演出

先ほどのCSSのみの演出は、inputのcheckboxにチェックを入れる事でON・OFFを実現していました。

それに対し今回はbuttonを使いますので、ON・OFFはJSが制御する事になります。

まずそれぞれのid属性をつけた4つの要素を変数に代入します。

JS最初の4行

2つのボタンによるclosedクラスの付け外し

closeButtonを押した際、上記のmodalとmodalOverlayにclosedクラスを追加します。

closedが付く事で2つの要素は非表示になります。

openButtonを押した際、上記のmodalとmodalOverlayにclosedクラスを削除します。

これによりclosedの効果が無くなるので、2つの要素が表示されます。

ON・OFFは交互に作用

閉じるボタンが表示されている時、開くボタンは操作不可背景の下にあるので押す事はできません。

逆に開くボタンが表示されている時、閉じるボタンがあるウィンドウは非表示になっているので押せない訳です。

これによりONとOFFを交互に命令する事ができる様になっています。

最初は窓を閉じた状態から始めたい

上記のサンプルのままだと、ページを開いた時モーダルウィンドウが開いた状態で始まります。

理想なのは閉じた状態から始まり、ボタンを押したら表示される形ですよね。

そこでHTMLコードのmodalとmodalOverlayのクラス名に、最初から「closed」を入れておきます。

初期値にclosedを設定

<div class="modal-overlay closed" id="modal-overlay"></div> <div class="modal closed" id="modal">

この様にすれば、JSは「closeが入った場合の処理」を最初に開始します。

toggleでクラス名を出し入れ

.toggle("closed")の部分は、closedが入っていたら消して、消えていたら付けるという命令になります。

最初からclosedを書いておけば、ページのリロード時はclosedが効いているのでウィンドウは消えた状態になります。

開くボタンを押す事で、closedが疑似的に消滅するのでウィンドウが開く訳です。

ポップアップ表示（レスポンシブル対応版）

もう一つレスポンシブルデザイン向けのポップアップ例をご紹介します。

レスポンシブル対応

このポップアップはアニメーション効果の付いた、レスポンシブなモバイルファーストのポップアップです。

PCでは画面の中央部に表示され、モバイルでは画面の下部に表示される仕様です。

それぞれで確認してみて下さい。

サンプル

構成ソース

各ソースをコピペしてそのまま使えますので利用ください。

一押し人気コーナー紹介