ポップアップを「CSSだけ」「jQueryも併用」の2パターン作ってみた

画像の拡大や、詳細情報を表示させるため、など、サイト上でポップアップ表示を使うことはよくあると思います。

ただ表示・非表示するだけなら簡単ですが、徐々にふわっと表示(フェードイン)させたり非表示(フェードアウト)させたり、となると、少し工夫が必要になることも。

そんな、フェードイン・フェードアウトするポップアップ(以下、勝手に「フェードポップ」と略します)を、CSSだけで行うパターンと、jQueryを併用するパターンでメモメモ。

ちなみに、今回はチェックボックスを使ってON/OFFを制御します。

CSSだけでフェードポップ

CSSだけでフェードポップする場合、display指定でのON/OFFではフェード処理ができないため、visibilityとopacityを使って再現します。

まずはHTML。

<label for="popup-checkbox">
  <div class="popup-show">CSSでフェードポップ</div>
</label>
<input type="checkbox" id="popup-checkbox">
<div class="popup">
  <label for="popup-checkbox" class="popup-hide">×</label>
  <div class="popup-contents">ポップアップテスト</div>
</div>

つづいてCSS。

#popup-checkbox {
    display: none;
}
.popup {
    background: #eee;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
    height: 200px;
    opacity: 0;
    position: fixed;
    transition: .8s;
    visibility: hidden;
    width: 300px;
}
#popup-checkbox:checked + .popup {
    visibility: visible;
    opacity: 1;
}
.popup-show {
    border: solid 2px #000;
    text-align: center;
    width: 200px;
}
.popup-show:hover {
    cursor: pointer;
}
.popup-hide {
    color: #000;
    padding: 0 10px;
    position: absolute;
    right: 0;
}
.popup-hide:hover {
    cursor: pointer;
}
.popup-contents {
    margin: 20px auto;
    width: 90%;
}

上記では、幅300px、高さ200pxのポップアップウィンドウを表示します。box-shadowでポップアップウィンドウの外を半透明の黒で覆っているので、一見モーダルウィンドウっぽいですが、一応ポップアップウィンドウです。

フェードする速度はtransitionで指定します。「.8s」と指定しているので、0.8秒かけてフェード処理してくれます。

jQueryを併用してフェードポップ

jQueryを併用してフェードポップする場合は、displayを使ってもフェード処理できるので、displayを使って再現します。

HTMLは「CSSだけでフェードポップ」と同一なので、ここでは省略します。

CSSは以下の通り。

#popup-checkbox {
    display: none;
}
.popup {
    background: #eee;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
    height: 200px;
    margin: auto;
    position: fixed;
    width: 300px;
}
.popup-show {
    border: solid 2px #000;
    text-align: center;
    width: 200px;
}
.popup-show:hover {
    cursor: pointer;
}
.popup-hide {
    color: #000;
    padding: 0 10px;
    position: absolute;
    right: 0;
}
.popup-hide:hover {
    cursor: pointer;
}
.popup-contents {
    margin: 20px auto;
    width: 90%;
}
@keyframes display-show {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes display-hide {
    from { opacity: 1; }
    to   {
        display: none;
        opacity: 0;
    }
}

つづいて、jQuery部分。

$(function(){
    $('.popup').hide();
    $('.popup-show').on('click', function(){
        $('.popup').css({'display':'block', 'animation':'display-show .8s linear 0s forwards'});
    });
    $('.popup-hide').on('click', function(){
        $('.popup').css('animation','display-hide .8s linear 0s forwards');
    });
});

CSSのみの処理と同様、幅300px、高さ200pxのポップアップウィンドウを表示します。

フェードする速度は、jQuery内のanimationで指定します。「.8s」と指定しているので、0.8秒かけてフェード処理してくれます。

表示するとき(show)はdisplayをblockにしてからopacityの値を徐々に変化させながら表示し、非表示にするとき(hide)はopacityの値を徐々に変化させてから、最後にdisplayをnoneにして完全に非表示にしています。

さいごに

どちらが楽に組めるのか、どちらがメンテナンス性に優れるのかは、その環境によって違うと思いますが、少なくともCSSだけで再現すれば、JavaScriptがOFFになっていても動作してくれることでしょう。

逆に、jQueryを使うことで、同時に多様な処理を行うこともできるかもしれません。

ここにメモした処理はあくまで一例、ということで。

初稿:2020年9月14日

この記事をシェア

アカウントをフォロー