スクロール可能なモーダルの固定位置を持つDiv

Question

私は、ブラウザウィンドウに対して固定位置を持つべきスクロールを持つモーダルにdivを持っており、モーダルでスクロールしないでください。

position:fixedを試しましたが、動作しません。私はdivのことを解決することができ

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Modal title</h4> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

方法：それはコンテキストの中でここでは、問題を見ることができますか？モーダル・ボディで

Answer 1

私は@Shiploラーマンによって回答に基づいて問題を解決するために管理し、Dejan.Sモーダル・ヘッダを削除し

@、モーダル・ボディにすべてを入れてやってjqueryの問題を回避するには、ここで説明：jQuery: Fix div when browser scrolls to it

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
}); 
 

 
jQuery(function($) { 
 
    function fixDiv() { 
 
    var $cache = $('#getFixed'); 
 
    if ($('.modal-body').scrollTop() > 50) 
 
    { 
 
    $cache.css({ 
 
     'position': 'fixed', 
 
     'top': '0px', 
 
     'left': '25px', 
 
     'width': '600px' 
 
     }); 
 
    } 
 
    else 
 
     $cache.css({ 
 
     'position': 'relative', 
 
     'top': 'auto', 
 
     'left': '10px' 
 
     }); 
 
    } 
 
    $('.modal-body').scroll(fixDiv); 
 
    fixDiv(); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
 
.modal-open .modal { 
 
    //overflow: hidden; 
 
} 
 
.modal-body { 
 
    height: calc(100vh - 126px); 
 
    overflow-y: scroll; 
 
} 
 
    
 
#getFixed { 
 
    position: relative; 
 
    left: 10px; 
 
    width: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 

 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body" id="confirm2"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Modal title</h4> 
 
       <div id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

ここで

はソースです：固定div要素が一番下に今あるモーダルのフォームに関連するいくつかのボタンが含まれていますDejan.S @ http://jsfiddle.net/roahda03/21/

Answer 2

あなたは、max-高さを設定し、そのように溢れ教えてください：

.modal-body{ 
    overflow: auto; 
    max-height: 200px; 
} 

Answer 3

あなたはモーダルの外にDIVを移動する必要があります。

固定配置は、祖先要素にtransformが適用されている場合、を除き、viewportと関連して機能します。 .modal-dialogにはtransformが適用され、DIVを配置する新しいコンテキストが作成されます（これがDIVがモーダルの内側にある理由です）。あなたはこのように使用することができます

CSS Positioning - MDN

Answer 4

。

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
 
.modal-open .modal { 
 
    overflow: hidden; 
 
} 
 
.modal-body { 
 
    height: calc(100vh - 126px); 
 
    overflow-y:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Modal title</h4> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->