0%

Programmingプログラミングナレッジ

Posted:2017.11.08

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

詳細情報や画像の拡大表示などに使える機能のモーダルウィンドウですが、いろんなプラグインが存在するのですが、意外にカスタマイズがややこしかったりします。それならば一から作ってみようということで、今回はプラグインを使わずにモーダルウィンドウを実装していきたいと思います。

 

モーダルを表示させる場面についてはいろんなパターンがありますが、今回は最も基本的な形の画像拡大表示のものをベースに見ていきたいと思います。

 

まずは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で特定の要素以外をクリックした時に操作させる方法」

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】