画面中央に表示するモーダルウィンドウを実装したい

画面中央に表示するモーダルウィンドウをjQueryで実装してみました。

■HTML

<div id="modal-main">モーダルウィンドウ</div>
 
<!-- #contents START -->
  <div id="contents">
    <p><a id="modal-open">【クリックでモーダルウィンドウを開きます。】</a></p>
    <p class="page-txt">ここからページ本文<br>
    <br>
    ↓↓↓　スクロールしてください ↓↓↓</p>
  </div>
<!--/#contents-->

■CSS

#contents {
  z-index: 0;
  font-size: 16px;
}
.page-txt {
  margin: 30px 0 0;
  height: 2000px;
}
#modal-open {
  color: #cc0000;
}
/* モーダル コンテンツエリア */
#modal-main {
　　display: none;
　　width: 500px;
　　height: 300px;
　　margin: 0;
　　padding: 0;
　　background-color: #ffffff;
　　color: #666666;
　　position:fixed;
　　z-index: 2;
}
/* モーダル 背景エリア */
#modal-bg {
　　display:none;
　　width:100%;
　　height:100%;
　　background-color: rgba(0,0,0,0.5);
　　position:fixed;
　　top:0;
　　left:0;
　　z-index: 1;
}

■js

//modal
$(function(){
 
  //テキストリンクをクリックしたら
 $("#modal-open").click(function(){
      //body内の最後に<div id="modal-bg"></div>を挿入
     $("body").append('<div id="modal-bg"></div>');
 
    //画面中央を計算する関数を実行
    modalResize();
 
    //モーダルウィンドウを表示
        $("#modal-bg,#modal-main").fadeIn("slow");
 
    //画面のどこかをクリックしたらモーダルを閉じる
      $("#modal-bg,#modal-main").click(function(){
          $("#modal-main,#modal-bg").fadeOut("slow",function(){
         //挿入した<div id="modal-bg"></div>を削除
              $('#modal-bg').remove() ;
         });
 
        });
 
    //画面の左上からmodal-mainの横幅・高さを引き、その値を2で割ると画面中央の位置が計算できます
     $(window).resize(modalResize);
      function modalResize(){
 
            var w = $(window).width();
          var h = $(window).height();
 
            var cw = $("#modal-main").outerWidth();
           var ch = $("#modal-main").outerHeight();
 
        //取得した値をcssに追加する
            $("#modal-main").css({
                "left": ((w - cw)/2) + "px",
                "top": ((h - ch)/2) + "px"
          });
     }
   });
});

■ブラウザでの表示

#modal-mainがモーダルウィンドウのコンテンツエリア、 #modal-bgが背景エリアで、テキストリンクをクリックでこれらを表示させます。閉じるときは画面のどこかをクリックします。モーダルの背景エリアはHTMLに書かず、jQueryでbodyタグの末尾に追加しています。

画面中央の位置はmodalResizeという関数を用意し、そこで取得しています。 #modal-bgに#modal-mainをpositionで重ねており、 #modal-mainのtopとleftの値をjQueryで追加しセンタリングさせています。

■スマホサイトで実装する時の注意点
iPhoneなど機種によっては、モーダルウィンドウを表示した状態でスクロールすると、
ツールバーが非表示になるため背景色が途切れる事があります。
その対策として、#modal-bg（背景エリア）の高さを100%以上にしています。
iPhone 6s Plusのsafariはheight:130%;で解決しました。

Recommend

htmlにxmlファイルを読み込ませたい

PDF.jsを使ってみる

【jQuery】多機能でカスタマイズしやすいモーダルウィンドウ、Colorboxが最高に使いやすい

【jQuery】JSで共通ナビの現在地をアクティブにする