「HTML」と「CSS」のみで実装する　ポップアップ表示

2023年7月1日 2025年3月20日

Web Basic Archive

WEBサイトを訪れた際に、ユーザーに興味を引いてもらう手法の一つに、「ポップアップ」表示があります。ECサイトでは、販促クーポンの配布など、キャンペーンページに誘導したり、企業サイトでも、重要なお知らせを表示する際に見ることが多くなっています。

こちらの実装も、「JavaScript」を使用せずに、「HTML」と「CSS」のみで、比較的簡単に設置することが可能です。

独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】

ポップアップとは何か？
クリック動作の実装方法
HTMLマークアップ
CSSスタイリング
コードサンプル

ポップアップとは何か？

それではまず、ポップアップ表示とはどのようなものを指すのでしょうか。

テキストやボタンのクリック動作に伴って、ページ上に別のウィンドウが表示されます。ウィンドウは、ページコンテンツの上位レイヤーに配置され、ウィンドウが表示されている間は、ページコンテンツは暗い表示になって操作ができなくなり、ウィンドウを閉じると通常の操作ができるようになる…というのが一般的な仕様ではないでしょうか。

同じような表示に、モーダルウィンドウというものがあります。厳密に言えば、動作に違いがあるとのことですが、ここでは同意義として扱います。

クリック動作の実装方法

ポップアップウィンドウを表示するきっかけ（トリガー）となるのはボタンをクリックする動作になります。JavaScriptを使用しないで、クリックでスタイルを切り替えさせるには、「HTML 」input要素のclicked属性と、「CSS」間接セレクタ（~）を利用します。

このブログでは、以前の「ハンバーガーメニューの実装方法」でもお伝えしたテクニックで、今回はその方法を応用したものとなります。合わせて記事を確認いただくと、よりご理解いただけます。

ポイントをまとめると次になります。

input要素とlabel要素のfor属性で、紐づけができる特性を利用して、label要素でボタンを作成する。
label要素をクリックすると、checkboxタイプのinput要素には、checked属性が付与される。
checked 属性がついていない時と、ついている時でCSSのスタイルを切り替える
間接セレクタ（~）を利用するには、HTML のツリー構造で、スタイルを変化させるlabel要素などを、input 要素の後に配置しないといけない。

HTMLマークアップ

上記のポイントを確認して、まずはHTMLの全体像を見てみましょう。

<body>
    <!-- input要素の配置は、ポップアップ部分より前にする -->
    <input type="checkbox" id="popup">

    <!-- ポップアップ部分 -->
    <div id="overlay">
        <label for="popup" id="bg_gray"></label> <!-- ウィンドウの外のグレーの領域 -->

        <div id="window"> <!-- ウィンドウ部分 -->
            <label for="popup" id="btn_cloth"> <!-- 閉じるボタン -->
                <span></span>
            </label>
            <div id="msg"> <!-- ウィンドウのコンテンツ -->
                <h2>初回ご利用の方は、50%OFFクーポン配布中</h2>
                <a href="">詳しくはこちらから ></a>
                <p>ポップアップの外をクリックしてもウィンドウが閉じます。</p>
            </div>
        </div>
    </div>

    <!-- ページのコンテンツ -->
    <h1>ポップアップ表示</h1>
    <p><label for="popup" id="txt_label">このテキスト</label>をクリックするとポップアップが表示されます。</p>

</body>

３行目：クリック動作判定のためのinput要素はcheckboxに設定します。このサンプルでは、body要素の一番最初に配置していますが、後に記述するlabel要素やポップアップ部分の要素より先に書いておけば、ページのメインコンテンツの要素より後になっても問題ないので、サイトの構成によって変更してください。

６行目以降：ポップアップ表示の部分です。ウィンドウ部分は９行目以降になります。表示後にクリックすると閉じるボタンは、label要素で作成。さきほどのinput要素とfor属性で紐づけます。７行目のlabel要素は、ユーザービリティを考慮して、ウィンドウ領域の外の部分をクリックしても、ポップアップ表示が閉じるように、画面全体を覆うオーバーレイ部分として作成します。これも同じinput要素と紐づけます。

２３行目：さらにページコンテンツ部分にも、input要素と紐づけたlabel要素を配置。このlabel部分をクリックするとポップアップが表示されます。今回は、テキストとして作成していますが、ボタンとして装飾してもいいでしょう。

このように、同じinput要素と紐づけたlabel要素を複数配置することにより、ポップアップ表示のクリック動作を制御しています。

CSSスタイリング

次にCSSのスタイル設定を見てみましょう。

input {
    display: none;
}

/* ポップアップwindow部分 */
#overlay {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
}
/* オーバーレイの背景部分 */
#bg_gray {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
}
/* ウィンドウ部分 */
#window {
    width: 50%;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.6);
    z-index: 90;
    opacity: 0;
}
/* 閉じるボタン */
#btn_cloth {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CE5D8B;
    border-radius: 5px;
    z-index: 100;
    cursor: pointer;
}
#btn_cloth:hover {
    opacity: 0.7;
}
#btn_cloth span,
#btn_cloth span::before {
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
#btn_cloth span {
    transform: rotate(45deg);
}
#btn_cloth span::before {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}


/* クリックで表示 */
#popup:checked ~ #overlay {
    visibility: visible;
}
#popup:checked ~ #overlay #window {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}
@keyframes fadein {
    100% {
        opacity: 1;
    }
}


/* コンテンツ部分のスタイル */
body {
    margin: 30px;
}


#txt_label {
    text-decoration: underline;
    cursor: pointer;
}
#txt_label:hover {
    opacity: 0.7;
}


#msg a {
    display: inline-block;
    color: #fff;
    background: #CE5D8B;
    border-radius: 20px;
    padding: 0.5em 1.5em;
    text-decoration: none;
}
#msg a:hover {
    opacity: 0.7;
}

１行目：input要素は機能面しか使用しないので、非表示にします。

６行目以降：ポップアップ表示の部分は、最初は非表示なので、visibility: hidden;にします。

１６行目以降：クリックするとウィンドウが閉じる、オーバーレイの背景部分を設定します。画面全体に配置し、ページコンテンツが透けて見えるように、半透明のグレーにしています。また、レイヤーの重なりをz-indexで調整します。

２６行目以降：ウィンドウ部分のスタイルを設定します。こちらも最初は非表示になるのですが、フェイドインで表示させたいので、opacity:0;で設定しておきます。

７７行目以降：クリック動作後のポップアップ表示設定を、間接セレクタ（~）を使用して行います。オーバーレイの部分は、瞬時に表示させたいのでvisibility: visible;を指定。ウィンドウ部分は、フェイドインの表現のため徐々に表れるように、opacityのアニメーションとanimation-timing-functionでイージング設定を行いました。