https://www.horipro-international.com/wp_horipro/wp-content/themes/horipro-international/assets/js/modal.js

1//グローバル変数 (関数外)
2sX_syncerModal = 0 ;
3sY_syncerModal = 0 ;
4
5$(function(){
6 $(".modal_open, .gnav_list_item_about").click(function(){
7 //キーボード操作などにより、オーバーレイが多重起動するのを防止する
8 $( this ).blur() ; //ボタンからフォーカスを外す
9 if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
10 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;    //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
11
12//スクロール位置を記録
13var dElm = document.documentElement , dBody = document.body;
14sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標
15sY_syncerModal = dElm.scrollTop || dBody.scrollTop;   //現在位置のY座標
16
17 //オーバーレイを出現させる
18 $( "body" ).append( '<div id="modal-overlay"></div>' );
19 $( "#modal-overlay" ).fadeIn( "slow" );
20
21 //コンテンツをセンタリングする
22 centeringModalSyncer() ;
23
24 //コンテンツをフェードインする
25 $( ".modal" ).fadeIn( "slow" ) ;
26 $("body").css("position","fixed");
27 $(".content").css("position","fixed");
28 //position absoluteだと下にずれる減少を解消
29
30 //[#modal-overlay]、または[.modal_close]をクリックしたら…
31 $( "#modal-overlay,.modal_close" ).unbind().click( function(){
32
33  //スクロール位置を移動
34window.scrollTo( sX_syncerModal , sY_syncerModal );
35
36 //[.modal]と[#modal-overlay]をフェードアウトした後に…
37 $( ".modal,#modal-overlay" ).fadeOut( "slow" , function(){
38 //[#modal-overlay]を削除する
39 $("body").css("position","static");
40 $(".visual_wrap_logo").css("position","absolute");
41 $(".visual_box_btn").css("position","absolute");
42 $(".content").css("position","absolute");
43 $(".hamburger").removeClass("is-active");
44 $('#modal-overlay').remove() ;
45
46 } ) ;
47 } ) ;
48 } ) ;
49 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
50 $( window ).resize( centeringModalSyncer ) ;
51
52 //センタリングを実行する関数
53 function centeringModalSyncer() {
54
55 //画面(ウィンドウ)の幅、高さを取得
56 var w = $( window ).width() ;
57 var h = $( window ).height() ;
58
59 // コンテンツ(.modal)の幅、高さを取得
60 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
61 var cw = $( ".modal" ).outerWidth( {margin:true} );
62 var ch = $( ".modal" ).outerHeight( {margin:true} );
63 var cw = $( ".modal" ).outerWidth();
64 var ch = $( ".modal" ).outerHeight();
65
66 //センタリングを実行する
67 $( ".modal" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
68
69 }
70
71} ) ;