モーダルウィンドウの背景を固定させる方法をご教授願います。

コード
```###前提・実現したいこと
皆様初めまして。
標題の件でご質問させていただきます。

あるサイトを制作しており、モーダルウィンドウを実装したいと頼まれました。
モーダルウィンドウはできたのですが、その際に背景がスクロールさせた時に動いてしまいます。
要は背景を固定させたいのです。

そのためには下記のコードに何を付け加えればいいのか、ご教授いただければ幸いです。

初めて質問させていただくので、言葉足らずや失礼な点がありましたら申し訳ありません。

###該当のソースコード
```HTML
<div id="orver">
 <div id="wrap">
 <div id="contents">
 <a id="modal-open" class="button-link"><img src="image/sp/main_k/sp_sokai004.jpg"></a>
 </div> <!-- contents end -->
 </div> <!-- wrap end -->
</div> <!-- orver end -->
 
<!-- ここからモーダルウィンドウ -->
<div id="modal-content">
 <div id="modal-content-innar">
 <!-- モーダルウィンドウのコンテンツ開始 -->
 <div class="custmaer-voice-wrap">
 	<div class="voice-area">
 		<p>aaaaaa</p>
 		<p>bbbbbb</p>
 		<p>cccccc</p>
 	</div>
 	<div class="voice-area">
 		<p>aaaaaa</p>
 		<p>bbbbbb</p>
 		<p>cccccc</p>
 	</div>
 	<div class="voice-area">
 		<p>aaaaaa</p>
 		<p>bbbbbb</p>
 		<p>cccccc</p>
 	</div>
 </div>
 <p>モーダルウィンドウのデモ</p>
<p><a id="modal-close" class="button-link">閉じる</a></p>
 </div>
 <!-- モーダルウィンドウのコンテンツ終了 -->
</div>

CSS
1#modal-content {
2 width: 90% ;
3 margin: 0 ;
4 padding: 20px ;
5 background: #BCFAEE;
6 position: fixed ;
7 display: none ;
8 z-index: 2 ;
9font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
10
11}
12 
13#modal-content-innar{
14 margin:0 auto;
15 width:100%;
16}
17  
18#modal-overlay {
19 z-index: 1 ;
20 display: none ;
21 position: fixed ;
22 top: 0 ;
23 left: 0 ;
24 width: 100% ;
25 height: 120% ;
26 background-color: rgba( 0,0,0, 0.75 ) ;
27}
28 
29.button-link {
30 color: #00f ;
31 text-decoration: underline ;
32}
33 
34.button-link:hover {
35 cursor: pointer ;
36 color: #f00 ;
37}
38
39.custmaer-voice-wrap{
40	overflow: scroll;
41	height: 400px;
42}
43
44.voice-area{
45	background-color: white;
46	padding: 10px;
47	margin-bottom: 10px;
48}
49
50.voice-area p:first-child{
51	border-left: 3px #BCFAEE solid;
52	border-bottom: 1px #BCFAEE solid;
53	padding-left: 5px;
54	margin-bottom: 5px;
55	font-size: 2.0rem;
56}
57
58.voice-area p:nth-child(even){
59	font-size: 1.2rem;
60	color: orange;
61}
62
63.voice-area p:nth-child(even) span{
64	display: inline-block;
65	border-radius: 3px;
66	background-color: orange;
67	color: white;
68	text-align: center;
69	padding: 1px 3px;
70	margin-right: 3px;
71}
72
73.voice-area p:last-child{
74	margin-top: 10px;
75	font-size: 1.7rem;
76}

JavaScript
1//グローバル変数 (関数外)
2sX_syncerModal = 0 ;
3sY_syncerModal = 0 ;
4
5$(function(){
6 $("#modal-open").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
13//スクロール位置を記録
14var dElm = document.documentElement , dBody = document.body;
15sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標
16sY_syncerModal = dElm.scrollTop || dBody.scrollTop;   //現在位置のY座標
17
18 //オーバーレイを出現させる
19 $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
20 $( "#modal-overlay" ).fadeIn( "slow" ) ;
21 
22 //コンテンツをセンタリングする
23 centeringModalSyncer() ;
24 
25 //コンテンツをフェードインする
26 $( "#modal-content" ).fadeIn( "slow" ) ;
27 
28 //[#modal-overlay]、または[#modal-close]をクリックしたら…
29 $( "#modal-overlay,#modal-close" ).unbind().click( function(){
30
31  //スクロール位置を移動
32window.scrollTo( sX_syncerModal , sY_syncerModal );
33 
34 //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
35 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
36 
37 //[#modal-overlay]を削除する
38 $('#modal-overlay').remove() ;
39 
40 } ) ;
41 
42 } ) ;
43 
44 } ) ;
45 
46 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
47 $( window ).resize( centeringModalSyncer ) ;
48 
49 //センタリングを実行する関数
50 function centeringModalSyncer() {
51 
52 //画面(ウィンドウ)の幅、高さを取得
53 var w = $( window ).width() ;
54 var h = $( window ).height() ;
55 
56 // コンテンツ(#modal-content)の幅、高さを取得
57 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
58 var cw = $( "#modal-content" ).outerWidth( {margin:true} );
59 var ch = $( "#modal-content" ).outerHeight( {margin:true} );
60 var cw = $( "#modal-content" ).outerWidth();
61 var ch = $( "#modal-content" ).outerHeight();
62 
63 //センタリングを実行する
64 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
65 
66 }
67 
68} ) ;

###補足情報
JavaScript初心者です。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

素人の回答で参考になるかわからないのですが
単純に

コンテンツをフェードインするときに
$("body").css("position","fixed");

[#modal-overlay]を削除するときに
$("body").css("position","static");

と足してみたのですがいかがでしょうか

サンプル

javascript
1//グローバル変数 (関数外)
2sX_syncerModal = 0 ;
3sY_syncerModal = 0 ;
4
5$(function(){
6 $("#modal-open").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
13//スクロール位置を記録
14var dElm = document.documentElement , dBody = document.body;
15sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft; //現在位置のX座標
16sY_syncerModal = dElm.scrollTop || dBody.scrollTop;   //現在位置のY座標
17
18 //オーバーレイを出現させる
19 $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
20 $( "#modal-overlay" ).fadeIn( "slow" ) ;
21
22 //コンテンツをセンタリングする
23 centeringModalSyncer() ;
24
25 //コンテンツをフェードインする
26 $( "#modal-content" ).fadeIn( "slow" ) ;
27 $("body").css("position","fixed");
28
29 //[#modal-overlay]、または[#modal-close]をクリックしたら…
30 $( "#modal-overlay,#modal-close" ).unbind().click( function(){
31
32  //スクロール位置を移動
33window.scrollTo( sX_syncerModal , sY_syncerModal );
34
35 //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
36 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
37
38 //[#modal-overlay]を削除する
39 $("body").css("position","static");
40 $('#modal-overlay').remove() ;
41
42 } ) ;
43
44 } ) ;
45
46 } ) ;
47
48 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
49 $( window ).resize( centeringModalSyncer ) ;
50
51 //センタリングを実行する関数
52 function centeringModalSyncer() {
53
54 //画面(ウィンドウ)の幅、高さを取得
55 var w = $( window ).width() ;
56 var h = $( window ).height() ;
57
58 // コンテンツ(#modal-content)の幅、高さを取得
59 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
60 var cw = $( "#modal-content" ).outerWidth( {margin:true} );
61 var ch = $( "#modal-content" ).outerHeight( {margin:true} );
62 var cw = $( "#modal-content" ).outerWidth();
63 var ch = $( "#modal-content" ).outerHeight();
64
65 //センタリングを実行する
66 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
67
68 }
69
70} ) ;