【jQuery】プラグイン不要!背景をクリックしても閉じるモーダルウィンドウの作り方

jQuery


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

モーダルウィンドウってプラグイン使わないと出来ない?

 

 

といった方に対する記事となります。

モーダルウィンドウと言えばLightboxなどの有名なプラグインを使用しても実装可能ですが、今回はプラグインを使わずに実装する方法をご紹介します。

 


モーダルウィンドウとは?

 

まずモーダルウィンドウについて軽く説明します。

モーダルウィンドウとは、画像などをクリックしたら拡大表示されたり、画像以外にもコンテンツをポップアップさせたりするやつです。

今回はボタンをクリックしたら画像がポップアップされるように作ってみたいと思います。

 

HTML

 

まずはHTMLから見てみます。

<body>
  <main>
   <section class="about">
     <h2>ABOUT</h2>
     <p>
       ここにABOUTテキストが入ります。
     </p>
   </section>
    <div class="btn">
      <a class="btn__link js-modal-open" href="">ハリネズミ</a>
    </div>
    <div class="modal js-modal">
     <div class="modal__overlay js-modal-close"></div>
      <div class="modal__content">
        <img src="画像のパス" />
        <p><a class="js-modal-close" href="">閉じる</a></p>
      </div>
    </div>
 </main>
</body>

 

今回作るモーダルウィンドウはオープン時に背景をスクロールさせないようにするため、スクロール出来るような長さになるようにsectionを入れています。

 

<div class=”modal__overlay js-modal-close”></div>は、モーダルウィンドウの薄暗い背景で、ここをクリックしても閉じるようにしたいので、ここにも閉じるためのclassである js-modal-close を付けています。

 


CSS

 

CSSはモーダルに関係する部分だけ書きます。

.btn {
  margin: 0 auto 200px;
  width: 100px;
}
.btn a {
  background-color: #fffacd;
  color: #222;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}
.modal {
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.modal__overlay {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  background: #fff;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: right;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width:200px;
  width: 100%;
}
.modal__content img {
  max-width:200px;
  width: 100%;
}
.modal__content p {
  background-color: #eee;
  display: inline-block;
  font-size: 16px;
}
.modal__content a {
  color: #000;
  padding: 5px 10px;
  text-align: right;
}
.fixed {
  height: 100%;
  position: fixed;
  width: 100%;
}

 

.modalが実際に開く部分で、最初はdisplay: none;にして非表示にしておきます。

これはjQueryで表示非表示をコントロールします。

 

.fixedは背景を固定させるためのcssで、モーダルウィンドウを開いた時にjQueryを使ってbodyに付与します。

 

jQuery

 

最後にjQueryです。

これはモーダルウィンドウと背景固定で分けています。

// モーダルウィンドウ
$(function () {
  $(".js-modal-open").on("click", function () {
    $(".js-modal").fadeIn();
    return false;
  });
  $(".js-modal-close").on("click", function () {
    $(".js-modal").fadeOut();
    return false;
  });
});
// モーダルウィンドウオープン時の背景固定
$(function () {
  let scrollPosition;
  $(".js-modal-open").on("click", function () {
    scrollPosition = $(window).scrollTop();
    $("body").addClass("fixed").css({ top: -scrollPosition });
  });
  $(".js-modal-close").on("click", function () {
    $("body").removeClass("fixed").css({ top: 0 });
    window.scrollTo(0, scrollPosition);
  });
});

 

.js-modal-openが付いているボタンをクリックすると.js-modalが表示され、.js-modal-closeをクリックすると非表示になります。

.js-modal-closeは閉じるボタンと薄暗い背景になります。

 

背景固定については.js-modal-openが付いているボタンをクリックするとbodyに.fixedで書いたプロパティが反映され、背景が固定されます。

そして閉じるボタンか薄暗い背景をクリックすれば固定も解除されます。

 

それでは完成形を見てみましょう(ハリネズミというボタンをクリックして下さい)

See the Pen
モーダルウィンドウ
by junpei (@junpei-sugiyama)
on CodePen.


以上です。