may88seiji
6/9/2017 - 9:46 AM

modal targetの使い方。clickしたデータ属性、スクロール位置をmodule.jsで取得してModal.open()の引数にしてmodal.jsに渡す。 modal.jsではもらった値から開くモーダルを選択、スクロール位置を取得、表示する。

modal targetの使い方。clickしたデータ属性、スクロール位置をmodule.jsで取得してModal.open()の引数にしてmodal.jsに渡す。 modal.jsではもらった値から開くモーダルを選択、スクロール位置を取得、表示する。

module.js
content_copyfile_download
let currentPos = $('body').scrollTop();
$(document)
//clickの範囲を絞れる
    .on('click','.js-modal_open',function(){
      const target = $(this).attr('data-modal');
      currentPos = $('body').scrollTop();
      Modal.open(target,currentPos);
  })
    .on('click','.js-modal_close',function(){
    const target = $(this).parent('.js-modal_container').attr('data-modal');
    Modal.close(target,currentPos);
  })
;
modal.js
content_copyfile_download
import $ from 'jquery';

export function open(target,currentPos){
  const $target = $('.js-modal_container[data-modal="' + target +'"]');
  $target.addClass('is-show');
  $('body').css({
    top: '-' + currentPos + 'px'
  }).addClass('is-modalOpen');
}

export function close(target,currentPos){
  const $target = $('.js-modal_container[data-modal="' + target +'"]');
  $target.removeClass('is-show');
  $('body').removeClass('is-modalOpen');
  $('html,body').scrollTop(currentPos);
}