如何相对于 bootstrap modal 修复 bootstrap modal 中的元素

Question

我想修复 bootstrap 模态中的一个元素，但是 position: fixed 但是在滚动时它会随着模态移动。我希望它即使在模式滚动后也能保持原位。

这里是JSFiddle。在这里您会看到 Patate 文本具有 position: fixed css 属性，但如果模态框很大，它会随之移动。我怎样才能将这个文本固定到它的位置，以便即使滚动模式也能保持在它的位置。

我运气不好。请帮忙。谢谢。

Answer 1

这可能会有所帮助。使用模式内的网格将固定 div 与其余内容分开。

$('.launch-scroll').on('click', function(e) {
  $('#modal-scroll').modal({
    show: true
  });
});

.modal {
    overflow: hidden;
}
.modal .modal-body {
    height: 500px;
    overflow: auto;
}
.modal .modal-fixed {
    position: fixed;
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
  <div class="container">
    <br />
    <button type="button" class="btn launch-scroll">Launch Confirm</button>
  </div>
</div>
<div class="modal fade" id="modal-scroll">
  <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">
        <div class="row">
          <div class="col-xs-2">
            <div class="modal-fixed">Patate</div>
          </div>
          <div class="col-xs-10">
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <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>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

如何相对于 bootstrap modal 修复 bootstrap modal 中的元素

how to fix an element inside bootstrap modal with respect to bootstrap modal

html

css

jquery

css-position

twitter-bootstrap