回答編集履歴

1 サンプル載せました

yukabyo

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"} ) ;
}
} ) ;
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る