https://221616.com/assets/js/about/common_pc.js

1
2
3$(function(){
4
5	//モーダル（汎用）
6	// 「.btn-modal」をクリック
7	$('.btn-modal').on('click',function() {
8		$('.modal-area .btn-close').css('display','table');
9		// オーバーレイ用の要素を追加
10		$('body').append('<div class="modal-overlay"></div>');
11		// オーバーレイをフェードイン
12		$('.modal-overlay').fadeIn('slow');
13		$('.l-body').addClass('bg-modal');
14		$('body').css('overflow','hidden');
15
16		// モーダルコンテンツのIDを取得
17		var modal = '#' + $(this).attr('data-target');
18
19		// モーダルコンテンツの表示位置を設定
20		modalResize();
21		// モーダルコンテンツフェードイン
22		$(modal).fadeIn('slow');
23		$(modal).addClass('on');
24
25		// 「.modal-overlay」あるいは「.modal-close」をクリック
26		$('.modal-overlay,.modal-close').on('click',function() {
27			// モーダルコンテンツとオーバーレイをフェードアウト
28			$('.modal-overlay').fadeOut('slow');
29			$(modal).removeClass('on');
30			$('.l-body').removeClass('bg-modal');
31			$('body').css('overflow','auto');
32			$('.modal-overlay').remove();
33		});
34
35		// リサイズしたら表示位置を再取得
36		$(window).on('resize', function(){
37			modalResize();
38		});
39
40		// モーダルコンテンツの表示位置を設定する関数
41		function modalResize(){
42			// ウィンドウの横幅、高さを取得
43			var w = $(window).width();
44			var h = $(window).height();
45
46			// モーダルコンテンツの表示位置を取得
47			var x = (w - $(modal).outerWidth(true)) / 2;
48			var y = (h - $(modal).outerHeight(true)) / 2;
49
50			// モーダルコンテンツの表示位置を設定
51			$(modal).css({'left': x + 'px','top': y + 'px'});
52		}
53	});
54
55});
56
57
58