CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3
user982124
user982124

Reputation: 4610

How to display Bootstrap Modal fixed on screen when page is scrolled?

I have a button that triggers a Bootstrap Modal to show. I've just noticed that the modal is not visible when the page has been scrolled down. When you click the button to show the modal the background goes grey like it normally does but the modal isn't showing - it's as if it is at the very top of the page but you can't scroll up to see it.

I temporarily moved the button to the top of the page and this works fine, but when the button is at the bottom of the page the modal isn't visible.

Here's my modal code:

<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 -->

and here's the button that shows the 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>

Upvotes: 0

Views: 1172

Answers (1)

Seunghaekim
Seunghaekim

Reputation: 77

Check the position property on it's style. change the value to fixed from absolute or relative it will help the solve your problem.

Upvotes: 1

Related Questions