在可滚动的模式中的固定位置的div

问题描述：

我有一个应该有相对于浏览器窗口的固定位置的滚动模式的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 -->

我怎么能解决这个问题的div？

@ Dejan.S固定DIV将包含在模态相关的形式的一些按钮，它们是目前在底部。 – neptune

答

我设法解决基于由@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 -->

这里是源： http://jsfiddle.net/roahda03/21/

答

在模体，你应该设定一个最大高度，然后告诉溢出，因此：

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

我不希望标题被修正，只是div。 – neptune

好的，那么你应该把div放在模态之外，或者至少超出.modal-content div – kiwi1342

答

您将需要移动DIV的模式之外。

固定定位与viewport相关，除了时，祖先元素应用transform。 .modal-dialog已将transform应用于它，它创建了一个定位DIV的新上下文（这就是为什么您的DIV停留在模态内）。

CSS Positioning - MDN

他是对的。尝试将该DIV放在'

您可以使用这样的。

$('.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 -->

我不需要修改标题。虽然，你给了我一个想法，并设法解决这个问题。谢谢 – neptune

答

您可以使用这样的。

$('.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 -->

我不需要修改标题。虽然，你给了我一个想法，并设法解决这个问题。谢谢 – neptune

在可滚动的模式中的固定位置的div

相关推荐