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

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

DEMO

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

参考 Modal Window

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

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

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);//詳細格納

まとめ

モーダル系の実装はこの記述を基盤に、スタイルでカスタマイズすれば実装に困ることはないかと思います。

Web制作を勉強している人の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »