jQueryでプラグインを使わずにシンプルなモーダルウィンドウを実装する

jQuery2017.11.8

最終更新日：2018.1.7 Update!!

詳細情報や画像の拡大表示などに使える機能のモーダルウィンドウですが、いろんなプラグインが存在するのですが、意外にカスタマイズがややこしかったりします。それならば一から作ってみようということで、今回はプラグインを使わずにモーダルウィンドウを実装していきたいと思います。モーダルを表示させる場面についてはいろんなパターンがありますが、今回は最も基本的な形の画像拡大表示のものをベースに見ていきたいと思います。まずはHTMLですが、コンテンツの後に（body終了タグ直前など）モーダル表示時の背景となるレイヤーと、中央前面に表示されるモーダルパネルを構成する要素を用意します。【HTML】（一部抜粋）

<body>
   <div class="content">
 
    <img id="modal-open" src="./sample-thumb.jpg" alt="サムネイル画像">
      // コンテンツ部分

   </div>
   <div id="modal-overlay">
     <div id="modal-panel">
       <img src="./sample.jpg" alt="拡大表示画像">
       <img id="modal-close" src="./close.png" alt="閉じる">
    </div>
  </div>
</body>

次にCSSもそれぞれ設定していきます。モーダル全体のレイヤーには画面全体に表示されるように配置して、半透明の背景色にしておきます。そして中央に配置されるパネル部分は幅と高さを設定する必要があるのですが、これらをmax-widthとmax-heightで固定値を指定し、幅は％で指定することでレスポンシブにも対応可能です。最後に閉じるボタンはパネル右上に来るよう絶対位置で配置しておきます。【CSS】

#modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.7);
  display: none;
  z-index: 1;
}
#modal-panel {
  width: 90%;
  max-width: 820px;
  height: auto;
  max-height: 620px;
  padding: 10px;
  position: fixed;
  background: #fff;
  z-index: 2;
}
#modal-close {
  position: absolute;
  right: -15px;
  top: -15px;
}

jQueryでは、モーダルを表示させるイベントに対象となる要素のクリックに指定します。そこでモーダル全体をfadeInで表示させます。また、パネルを画面中央に配置するために、ウィンドウ幅・高さからパネルの幅・高さを引いた値を出します。これがパネル左右・上下の余白が均等なサイズとなり、CSSでleftとtopの位置を指定することでパネル自体が中央に配置される仕組みになります。最後に閉じるボタンのクリックでモーダルが非表示になるようにします。【javascript】

$(function(){
   $("#modal-open").on('click',function(){
     $("#modal-overlay").fadeIn('slow');
     posCenter();
     $(window).on('resize',function(){
       posCenter();
     });
     function posCenter() {
       var w = $(window).width();
       var h = $(window).height();
       var ow = $("#modal-panel").outerWidth();
       var oh = $("#modal-panel").outerHeight();
       $("#modal-panel").css({
         'left':((w - ow) / 2) + 'px',
         'top':((h - oh) / 2) + 'px'
       });
     }
     $("#modal-close").on('click',function(){
       $("#modal-overlay").fadeOut('slow');
     });
   });
});

このような感じで結構簡単に実装できます。また、当ブログで過去に掲載した記事の「jQueryでサムネイルから画像切り替えできるイメージギャラリー機能を実装する」「jQueryで特定の要素以外をクリックした時に操作させる方法」なんかも合わせて使うことができると思います。今回のサンプルはこちらに掲載していますのでご参考ください。