https://www.yowai-otoko.com/r/js/modal.js

1/**
2 * 共通モーダル
3 */
4function modalOpen(num)
5{
6	//modal表示
7	$('.js-modal' + num).addClass('open').fadeIn();
8	//背景黒にz-indexを適用させるためソース位置を変更
9	$('.modal__bg.js-modal' + num).prependTo('body');
10	//高さの最大値を400px以下で固定
11	var modalBodyMaxHeight = $('.js-modal' + num + ' .modal__content .body').outerHeight();
12	if(modalBodyMaxHeight < 400){
13		$('.js-modal' + num + ' .modal__content .body').css('max-height', modalBodyMaxHeight + 'px');
14	}else{
15		$('.js-modal' + num + ' .modal__content .body').css('max-height', '400px');
16	}
17	//modal内記事本文エリアのスクロール活性/非活性処理
18	modalBodyHeight(num);
19	return false;
20}
21function modalClose(num)
22{
23	//modal非表示
24	$('.js-modal' + num).removeClass('open').fadeOut();
25	return false;
26}
27$(window).resize(function()
28{
29	//ウィンドウサイズ変更時のmodal内記事本文エリアのスクロール活性/非活性処理
30	$('.modal').each(function(){
31		if($(this).css('display') == 'block'){
32			var num = $(this).attr('class');
33			num = num.replace('modal js-modal', '');
34			modalBodyHeight(num);
35		}
36	});
37});
38function modalBodyHeight(num)
39{
40	//modal内記事本文エリアのスクロール活性/非活性処理
41	var bodyHeight = $('body').height(); 
42	var modalBodyHeight = $('.js-modal' + num + ' .modal__content .body').outerHeight();
43	var modalBodyMaxHeight = $('.js-modal' + num + ' .modal__content .body').css('max-height');
44	var modalBodyMaxHeight = modalBodyMaxHeight.replace('px','');

45	var modalHeight = $('.js-modal' + num + ' .modal__content').height() + 110;
46	var modalTitleHeight = $('.js-modal' + num + ' .modal__content .title').outerHeight();
47	var modalFooterHeight = $('.js-modal' + num + ' .modal__content .footer').outerHeight();
48	if(modalHeight <= modalHeight && modalBodyHeight >= 190){
49		var modalBodyHeightNew = bodyHeight - 110 - modalTitleHeight - modalFooterHeight;
50		$('.js-modal' + num + ' .modal__content .body').css({'height': modalBodyHeightNew + 'px', 'overflow-y':'auto', 'min-height':'150px'});
51	}
52	if(modalBodyHeightNew + 40 >= modalBodyMaxHeight && $('.js-modal' + num + ' .modal__content .body').css('height')){
53		$('.js-modal' + num + ' .modal__content .body').css({'height': '', 'overflow-y':'auto', 'min-height':''});
54	}
55	if(bodyHeight >= modalHeight && $('.js-modal' + num + ' .modal__content .body').css('height')){
56		$('.js-modal' + num + ' .modal__content .body').css('overflow-y','hidden');
57		setTimeout(function(){
58			$('.js-modal' + num + ' .modal__content .body').css({'height': '', 'overflow-y':'auto', 'min-height':''});
59		},100);
60	}
61}