jQuery：レスポンシブ・可変に対応したモーダルウィンドウ

こんにちは、タクゾウです。
仕事で使える、レスポンシブ・可変に対応したモーダルウィンドウを紹介したいと思います。

DEMO
モーダルウィンドウのコード
使用方法
まとめ

DEMO

作ったものはこちらです。

モーダルウィンドウのコード

わかりやすいようにコメント多めで書いています。

JavaScript

/*
* モダール
* @param {string} モーダル表示時に固定する要素指定。
* @return none
*/
function modalWindow(mainWrap){
  $(".modalOpen").click( function(){
    var modalOverlay = "#modalOverlay";//グレー背景のidを指定
    var modalClose = "#modalClose";//モーダルの閉じるボタン指定
    var modalCont = "#modalCont";//モーダルのコンテンツ指定

    // モーダルのコンテンツを埋め込む実装
    var modalImg = $(this).find(".mdlImg").clone();//img要素をクローン
    var modalTtl = $(this).find(".mdlTtl").text();//タイトルを取得
    var modalDetail = $(this).find(".mdlDet").text();//詳細を取得
    $('.modal-cont-img').html(modalImg);//img要素を格納
    $('.modal-cont-ttl').text(modalTtl);//タイトル格納
    $('.modal-cont-detail').text(modalDetail);//詳細格納

    if($(modalOverlay)[0])return false;
    var scrollpos = $(window).scrollTop();
    $(mainWrap).addClass('is-fixed').css({'top': -scrollpos});//要素を固定するスタイスを指定
    $(mainWrap).append( '<div id="modalOverlay"></div>' );//グレー要素を追加。
    $(modalOverlay).fadeIn( "slow" );
    centeringModalSyncer();//モーダルをセンタリング
    $( modalCont ).fadeIn( "slow" );
    $(modalOverlay + "," + modalClose).unbind().click( function(){//グレー要素か閉じるボタンをおした時の実装
      $(mainWrap).removeClass('is-fixed').css({'top': 0});
      window.scrollTo(0 , scrollpos);
      $(modalCont + "," + modalOverlay).fadeOut( "slow" , function(){
        $(modalOverlay).remove();
      });
    });
    return false;
  });
  $( window ).resize( centeringModalSyncer );
  function centeringModalSyncer() {//要素のセンタリング処理
    var w = $( window ).width();
    var h = $( window ).height();
    var cw = $( modalCont ).outerWidth();
    var ch = $( modalCont ).outerHeight();
    $( modalCont ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} );
  }
}

//DOMがよみこまれた段階で実装
$(function(){
  modalWindow('.main');
});

使用方法

モーダル表示時に固定する要素指定を引数に指定し、
modalWindow()を実装する。

引数には、モーダルを表示時に固定する要素名を指定します。通常は普通に使う場合はbodyで問題ないと思いますが、
CMSなどを使うと、レギュレーションでbodyにスタイルを適応できない事があるので、DEMOでは、body直下の「main」クラスのdivを固定する実装にしてあります。css要素固定の記述は任意で変更してください。

JavaScript

/* body直下でモーダルを表示させる場合は「.main」をbodyに変更して下さい。 */
.main.is-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

モーダル内のコンテンツは、htmlの要素を取得する。

モーダルのコンテンツは、hmtl内に非表示で記述し、jsで取得しています。
DEMOでは、画像とテキストを取得する実装にしています。

JavaScript

// モーダルのコンテンツを埋め込む実装
var modalImg = $(this).find(".mdlImg").clone();//img要素をクローン
var modalTtl = $(this).find(".mdlTtl").text();//タイトルを取得
var modalDetail = $(this).find(".mdlDet").text();//詳細を取得
$('.modal-cont-img').html(modalImg);//img要素を格納
$('.modal-cont-ttl').text(modalTtl);//タイトル格納
$('.modal-cont-detail').text(modalDetail);//詳細格納