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