Как отобразить исправленный Bootstrap Modal на экране при прокрутке страницы?

Question

У меня есть кнопка, которая запускает модальный Bootstrap, чтобы показать.Я только что заметил, что модал не виден, когда страница прокручивается вниз.Когда вы нажимаете кнопку, чтобы показать модал, фон становится серым, как обычно, но модал не отображается - он как будто находится в самом верху страницы, но вы не можете прокрутить вверх, чтобы увидеть его.

Я временно переместил кнопку в верхнюю часть страницы, и это прекрасно работает, но когда кнопка находится в нижней части страницы, модальное изображение не отображается.

Вот мой модальный код:

<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, это поможет решить вашу проблему.