https://www.topcon.co.jp/wp-content/themes/topcon/js/top/jquery-modalLayerBoard.js

1/*
2 * ===================================
3 *	jquery.layerBoard.js
4 *	@auther:kiyoty
5 *	@URI:http://www.idea-clippin.com
6 *	@create:2012/12/30
7 * 	@License:MIT License(X11 License、X License)
8 *	@modification:uta
9 * ===================================
10*/
11
12(function($) {
13	$.fn.layerBoard = function(option) {
14		var elements = this;
15		elements.each(function(){
16			option = $.extend({
17				delayTime: 200,
18				fadeTime : 500,
19				alpha : 0.5,
20				limitMin : 10,
21				easing: 'linear',
22				limitCookie : 3	,
23				countCookie : 10000
24			}, option);
25
26			var limitSec = option.limitMin * 60; //秒数に変換
27			// cookieがない場合 --------------------
28			if ($.cookie('layerBoardTime') == null || $.cookie('visitCount') == null) {
29				LayerBoardFunc ();
30				var start = new Date();	// cookieに現在の時間をセット
31				$.cookie('layerBoardTime', start.getTime(), { expires: option.limitCookie,path: '/' });
32				var visitCount = 1;  //訪問回数を1回に設定
33				$.cookie('visitCount', visitCount, { expires: option.limitCookie });
34			} else if ($.cookie('visitCount') <= option.countCookie - 1){
35			// cookieがある場合 --------------------
36				//Cookie"visitCount"の値に1つ足す
37				visitCount = $.cookie('visitCount');
38				visitCount ++;
39				$.cookie('visitCount', visitCount, { expires: option.limitCookie });
40				//現在のミリ秒を取得し、秒数に変換
41				var now = new Date();
42				secDiff = now.getTime() - $.cookie('layerBoardTime');
43				secTime = Math.floor( secDiff / 1000);
44				//指定時間を経過していた場合は、LayerBoardを表示
45				//cookieを削除後、再度cookieに現在のミリ秒をセット
46				if (secTime >= limitSec) {
47					LayerBoardFunc ();
48					$.cookie('layerBoardTime', null, { expires:-1,path: '/' });
49					var start = new Date();
50					$.cookie('layerBoardTime', start.getTime(), { expires:option.limitCookie,path: '/' });
51				}
52			}
53
54			// 表示処理 --------------------	
55			function LayerBoardFunc () {
56
57			}	
58			function LayerBoardFunc () {
59				$('#modal_window').css('display', 'block');	
60				$('.modal_bg', elements).show().animate({opacity: 0},0).delay(option.delayTime).animate({opacity: option.alpha},option.fadeTime,function(){
61					$('.modal_inner', elements).fadeIn(option.fadeTime);			
62					//表示した際背景のスクロール禁止
63					$('html, body').css('overflow', 'hidden');		
64				})				
65			}
66
67			// 非表示処理 --------------------
68			$('.modal_bg', elements).click(function() {			
69				$('.modal_inner , #modal_window', elements).fadeOut(option.fadeTime);
70				$(this).fadeOut(option.fadeTime);
71				$('#modal_window').css('display', 'none');
72
73				//非表示にした際背景のスクロール許可
74				$('html, body').css('overflow', 'auto');
75			});
76
77			// .mdl_btn_closeをクリックした時の動作(非表示処理) --------------------
78			$('.mdl_btn_close', elements).click(function() {				
79				$('.modal_inner , #modal_window', elements).fadeOut(option.fadeTime);
80				$('.modal_bg', elements).fadeOut(option.fadeTime);
81				$('#modal_window').css('display', 'none');
82				
83				//非表示にした際背景のスクロール許可
84				$('html, body').css('overflow', 'auto');
85			});
86
87			// モーダル表示用ボタンの表示処理 --------------------
88			$('.modal_inner_btn').click(function() {
89				$('#modal_window').css('display', 'block');			
90				$('.modal_bg', elements).show().animate({opacity: 0},0).delay(option.delayTime).animate({opacity: option.alpha},option.fadeTime,function(){
91					$('.modal_inner', elements).fadeIn(option.fadeTime);
92					
93					//表示した際背景のスクロール禁止
94					$('html, body').css('overflow', 'hidden');	
95
96				});
97			});
98
99			// 見た目処理(コンテンツが短い場合中央表示) --------------------
100			var bg_height = $('.modal_bg').outerHeight();
101			var layer_bord_height = $('.modal_inner').outerHeight();
102			if(bg_height + 40 >= layer_bord_height){
103				$('.modal_inner').addClass('shortLayer');
104			}
105
106		});
107		return this;	
108	};
109})( jQuery );