https://www.fudotetra-env.jp/js/modal.js

1/********************************************************************************
2
3	SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ
4
5	* 配布場所
6	https://syncer.jp/jquery-modal-window
7
8	* 最終更新日時
9	2015/08/17 15:55
10
11	* 作者
12	あらゆ
13
14	** 連絡先
15	Twitter: https://twitter.com/arayutw
16	Facebook: https://www.facebook.com/arayutw
17	Google+: https://plus.google.com/114918692417332410369/
18	E-mail: [email protected]
19
20	※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
21	※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。
22
23********************************************************************************/
24
25
26$(function(){
27
28//モーダルウィンドウを出現させるクリックイベント
29$("#modal-open").click( function(){
30
31	//キーボード操作などにより、オーバーレイが多重起動するのを防止する
32	$( this ).blur() ;	//ボタンからフォーカスを外す
33	if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない (防止策1)
34	//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する (防止策2)
35
36	//オーバーレイを出現させる
37	$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
38	$( "#modal-overlay" ).fadeIn( "slow" ) ;
39
40	//コンテンツをセンタリングする
41	centeringModalSyncer() ;
42
43	//コンテンツをフェードインする
44	$( "#modal-content" ).fadeIn( "slow" ) ;
45
46	//[#modal-overlay]、または[#modal-close]をクリックしたら…
47	$( "#modal-overlay,#modal-close" ).unbind().click( function(){
48
49		//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
50		$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
51
52			//[#modal-overlay]を削除する

53			$('#modal-overlay').remove() ;
54
55		} ) ;
56
57	} ) ;
58
59} ) ;
60
61//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
62$( window ).resize( centeringModalSyncer ) ;
63
64	//センタリングを実行する関数
65	function centeringModalSyncer() {
66
67		//画面(ウィンドウ)の幅、高さを取得
68		var w = $( window ).width() ;
69		var h = $( window ).height() ;
70
71		// コンテンツ(#modal-content)の幅、高さを取得
72		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
73//		var cw = $( "#modal-content" ).outerWidth( {margin:true} );
74//		var ch = $( "#modal-content" ).outerHeight( {margin:true} );
75		var cw = $( "#modal-content" ).outerWidth();
76		var ch = $( "#modal-content" ).outerHeight();
77
78		//センタリングを実行する
79		$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
80
81	}
82
83} ) ;