yukabyo score 135
2017/05/10 17:45 投稿
| こんにちは |
| 素人の回答で参考になるかわからないのですが |
| 単純に |
| コンテンツをフェードインするときに |
| $("body").css("position","fixed"); |
| [#modal-overlay]を削除するときに |
| $("body").css("position","static"); |
| と足してみたのですがいかがでしょうか |
| [サンプル](https://jsfiddle.net/xu2q5uds/) |
| ```javascript |
| //グローバル変数 (関数外) |
| sX_syncerModal = 0 ; |
| sY_syncerModal = 0 ; |
| $(function(){ |
| $("#modal-open").click(function(){ |
| //キーボード操作などにより、オーバーレイが多重起動するのを防止する |
| $( this ).blur() ; //ボタンからフォーカスを外す |
| if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) |
| //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) |
| //スクロール位置を記録 |
| var dElm = document.documentElement , dBody = document.body; |
| sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標 |
| sY_syncerModal = dElm.scrollTop || dBody.scrollTop; //現在位置のY座標 |
| //オーバーレイを出現させる |
| $( "body" ).append( '<div id="modal-overlay"></div>' ) ; |
| $( "#modal-overlay" ).fadeIn( "slow" ) ; |
| //コンテンツをセンタリングする |
| centeringModalSyncer() ; |
| //コンテンツをフェードインする |
| $( "#modal-content" ).fadeIn( "slow" ) ; |
| $("body").css("position","fixed"); |
| //[#modal-overlay]、または[#modal-close]をクリックしたら… |
| $( "#modal-overlay,#modal-close" ).unbind().click( function(){ |
| //スクロール位置を移動 |
| window.scrollTo( sX_syncerModal , sY_syncerModal ); |
| //[#modal-content]と[#modal-overlay]をフェードアウトした後に… |
| $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ |
| //[#modal-overlay]を削除する |
| $("body").css("position","static"); |
| $('#modal-overlay').remove() ; |
| } ) ; |
| } ) ; |
| } ) ; |
| //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する |
| $( window ).resize( centeringModalSyncer ) ; |
| //センタリングを実行する関数 |
| function centeringModalSyncer() { |
| //画面(ウィンドウ)の幅、高さを取得 |
| var w = $( window ).width() ; |
| var h = $( window ).height() ; |
| // コンテンツ(#modal-content)の幅、高さを取得 |
| // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 |
| var cw = $( "#modal-content" ).outerWidth( {margin:true} ); |
| var ch = $( "#modal-content" ).outerHeight( {margin:true} ); |
| var cw = $( "#modal-content" ).outerWidth(); |
| var ch = $( "#modal-content" ).outerHeight(); |
| //センタリングを実行する |
| $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; |
| } |
| } ) ; |
| ``` |
