Ownedmedia ウェブ制作に役立つコンテンツを発信中!

jQuery 2017.11.08

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

Tags: ,,
最終更新日: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で特定の要素以外をクリックした時に操作させる方法」

なんかも合わせて使うことができると思います。今回のサンプルはこちらに掲載していますのでご参考ください。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?