https://www.sanwa.co.jp/static/js/modal_side.js

1$(function() {
2		// modal-open をクリック
3		$('.modal-side-open').click(function() {
4				// スクロールバー
5				var scrollsize = $(window).width() - $('body').prop('clientWidth');
6				// html, body を固定
7				$('html, body').addClass('lock');
8
9				// オーバーレイ
10				$('body').append('<div class="modal-overlay"></div>');
11				$('.modal-overlay').fadeIn('slow');
12
13				// modal content ID
14				var modal = '#' + $(this).attr('data-target');
15
16				// modal contnt をwrap
17				$(modal).wrap('<div class="modal-wrap"></div>');
18				$('.modal-wrap').show();
19
20				// modal 表示位置
21				modalResize();
22
23				// modal content フェードイン
24				$(modal).fadeIn('slow');
25
26				// modal content 内をクリックした場合にはフェードアウトしない
27				$(modal).click(function(e) {
28						e.stopPropagation();
29				});
30
31				// modal-overlay か modal-close をクリック
32				$('.modal-wrap, .modal-close').off().click(function() {
33						$(modal).fadeOut('slow');
34						$('.modal-overlay').fadeOut('slow', function() {
35								// html, body 固定解除
36								$('html, body').removeClass('lock');
37								// オーバーレイ削除
38								$('.modal-overlay').remove();
39								$(modal).unwrap('<div class="modal-wrap"></div>');
40						});
41				});
42
43				// resize
44				$(window).on('resize', function() {
45						modalResize();
46				});
47
48				// 表示位置設定
49				function modalResize() {
50						// ウィンドウサイズ
51						var w = $(window).width();
52						var h = $(window).height();
53						// modal content サイズ
54						var mw = $(modal).outerWidth(true);
55						var mh = $(modal).outerHeight(true);
56
57						if ((mh > h) && (mw > w)) {
58								$(modal).css({'left':0 + 'px', 'top':0 + 'px'});
59						} else if ((mh > h) && (mw < w)) {
60								var x = (w - scrollsize - mw) / 2;
61								$(modal).css({'left':x + 'px', 'top':y + 'px'});
62						} else if ((mh < h) && (mw > w)) {
63								var y = (h - scrollsize - mh) / 2;
64								$(modal).css({'left':0 + 'px', 'top':y + 'px'});
65						} else {
66								var x = (w - mw) / 2;
67								var y = (h - mh) / 2;
68								$(modal).css({'left': x + 'px', 'top': y + 'px'});
69						}
70
71				}
72		});
73});