Question

我有一个按钮，可以触发显示一个Bootstrap Modal。我刚刚注意到，当页面向下滚动时，该模式不可见。当您单击按钮以显示模式时，背景会像通常一样变灰，但模式却不显示-好像它在页面的顶部，但是您无法向上滚动以查看它。

我暂时将按钮移到页面顶部，这很好用，但是当按钮在页面底部时，模态不可见。

这是我的模式代码：

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Delete Person</h4>
      </div>
      <div class="modal-body">
        <p>Do you wish to delete this Person?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="#" id="deletePersonLink"><button type="button" class="btn btn-danger">Delete</button></a>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

这是显示模式的按钮：

<button class="btn btn-default" type="button" data-toggle="modal" data-rec-id="1580" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span> Delete</button>

Answer 1

检查样式的position属性。将值从fixed或absolute更改为relative，将有助于解决您的问题。

滚动页面时如何在屏幕上显示固定的Bootstrap Modal？

1 个答案: