マウスオーバーとオーバーレイのポップアップウィンドウ

マウスオーバーとオーバーレイのポップアップウィンドウって、サイトを作成していると良く使いますよね。

今回はCSSだけで実装できるマウスオーバーのポップアップウィンドウと、jqueryを使用したオーバーレイのポップアップウィンドウをまとめました。

でもサイトはこちら

DEMO

マウスオーバーのポップアップウィンドウ

スマホサイトではあまり見ることがなくなりましたが、PCサイトを使用しているとマウスオーバーでポップアップを表示させるのは、実装も簡単なので注釈の詳細やヘルプ内容を実装する時に便利です。

HTML

<div class="mouseover__conts">
    <p class="btn-mouseover btn-pink">
        <a href="#" target="_brank">マウスオーバー</a>
    </p>
    <div class="mouseover__box">
        <p>マウスオーバーで表示されるポップアップウィンドウです。</p>
    </div>
</div>

CSS

.mouseover__boxがオーバーレイで表示されるポップアップウィンドウです。

通常時はdisplay:none;で非表示にさせておきます。

ボタンがhoverされたときにのみdisplay:block;で表示させます。

.btn-mouseover:hover + .mouseover__box{
  display: block;
}
.mouseover__box:hover{
  display: block;
}
.mouseover__box{
  display: none;
  position: absolute;
  top:0;
  left:0;
  width: 200px;
  padding: 15px;
  font-size: 13px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

オーバーレイのポップアップウィンドウ

PC、スマホサイト問わずオーバーレイのポップアップウィンドウは良く使われますね。
フォーム内の詳細設定だったり、アラート表示だったりページ遷移させずに、別コンテンツとして表示させることができるので何かと便利ですね！

HTML

<div class="overlay__conts">
    <p class="btn-overlay btn-pink">
        <a href="javascript:void(0);" class="js-overlay-modal-open">オーバーレイ</a>
    </p>
    <div class="overlay-modal js-overlay-modal">
        <div class="overlay-modal__overlay"></div>
        <div class="overlay-modal__body">
            <div class="overlay-modal__inner">
                <a href="javascript:void(0);" class="overlay-modal__close js-overlay-modal-close"><i class="fas fa-times"></i></a>
                <p>オーバーレイで表示されるポップアップウィンドウです。</p>
            </div>
        </div>
    </div>
</div>

CSS

.overlay-modalがオーバーレイで表示されるポップアップウィンドウです。

通常時はdisplay:none;で非表示にさせておきます。

.overlay-modal__overlayでポップアップウィンドウの下に敷く透過した背景を指定します。

.overlay-modal__bodyでポップアップウィンドウをcssで装飾していきます。

body.modal-openはポップアップが表示された時にbodyにつけるclassです。
背景がスクロールされないようにしています。

.overlay-modal{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}
.overlay-modal__overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
}
.overlay-modal__body{
  width: 100%;
  position: absolute;
  top: 50px;
  -webkit-transition: .4s;
  transition: .4s;
}
.overlay-modal__inner{
  margin: 0 auto;
  width: 80%;
  max-height: calc(100vh - 180px);
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.overlay-modal__inner p{
  font-size: 13px;
  padding: 20px;
}
.overlay-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
}
body.modal-open{
  width: 100%;
  height: 100%;
  position: fixed;
}

jquery

.js-overlay-modal-open（ボタン）をクリックしたら.overlay-modal（ポップアップウィンドウ）がdisplay:block;で表示されます。

その時bodyに.modal-openで背景がスクロールされないようにします。

.js-overlay-modal-close（ポップアップウィンドウの閉じるボタン）をクリックしたら.overlay-modal（ポップアップウィンドウ）がdisplay:none;で非表示になります。

その時bodyの.modal-openも消えて背景がスクロールされるようになります。

$(function(){
    // モーダル開く
    $(".js-overlay-modal-open").on("click", function(){
        $(".overlay-modal").fadeIn('normal');
        $("body").addClass('modal-open');
    });

    // モーダル閉じる
    $(".js-overlay-modal-close").on("click", function(){
        $(".overlay-modal").fadeOut('normal');
        $("body").removeClass('modal-open');
    });
});