質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 10K+

tantalus

score 14

コード

前提・実現したいこと

皆様初めまして。
標題の件でご質問させていただきます。

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

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

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

該当のソースコード

<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>
#modal-content {
 width: 90% ;
 margin: 0 ;
 padding: 20px ;
 background: #BCFAEE;
 position: fixed ;
 display: none ;
 z-index: 2 ;
font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

}

#modal-content-innar{
 margin:0 auto;
 width:100%;
}

#modal-overlay {
 z-index: 1 ;
 display: none ;
 position: fixed ;
 top: 0 ;
 left: 0 ;
 width: 100% ;
 height: 120% ;
 background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
 color: #00f ;
 text-decoration: underline ;
}

.button-link:hover {
 cursor: pointer ;
 color: #f00 ;
}

.custmaer-voice-wrap{
    overflow: scroll;
    height: 400px;
}

.voice-area{
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.voice-area p:first-child{
    border-left: 3px #BCFAEE solid;
    border-bottom: 1px #BCFAEE solid;
    padding-left: 5px;
    margin-bottom: 5px;
    font-size: 2.0rem;
}

.voice-area p:nth-child(even){
    font-size: 1.2rem;
    color: orange;
}

.voice-area p:nth-child(even) span{
    display: inline-block;
    border-radius: 3px;
    background-color: orange;
    color: white;
    text-align: center;
    padding: 1px 3px;
    margin-right: 3px;
}

.voice-area p:last-child{
    margin-top: 10px;
    font-size: 1.7rem;
}
//グローバル変数 (関数外)
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" ) ;

 //[#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]を削除する
 $('#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"} ) ;

 }

} ) ;

補足情報

JavaScript初心者です。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

こんにちは

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

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

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

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

サンプル

//グローバル変数 (関数外)
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"} ) ;

 }

} ) ;

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/10 18:13

    yukabyo様

    早急にご回答頂きましてありがとうございます。
    早速ソースを使用させていただきまして、無事に背景だけ固定できました!
    本当にありがとうございますm(__)m

    今後も何かご質問させていただきました際はお力添えいただけましたら幸いです。

    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る