Bootstrap v3 - Opening a modal window forces the page to scroll up to the top

Question

When I open a modal window it scrolls the background context all the way up to the top. Example I have links on the bottom of the page that open a modal window. When I click on the link the window will scroll up to the top of the document then display the modal window. I have no problem with the positioning of the modal window. I just don't want the scroll up to occur before it opens the page. I'm using mostly the default CSS that came from BS v3 (latest on github) and pretty much the default modal body. I am using JS to populate the label and body of the modal then opening it

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" id="myModalBody"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Since the example on the `getboostrap.com` site works fine, it must be something in your code. If you could post a fiddle, we might could help you out, but otherwise all you'll get is wild guesses. — Stephen Thomas, Jan 17 '14 at 18:14
Thanks for the response. TY was correct.. it was an issue with — Christopher Jazinski, Jan 17 '14 at 19:43

score 20 · Answer 1 · answered Oct 06 '16 at 22:55

20

I had the same problem. I had a button calling a javascript function to open the modal:

<a href="#" onclick="myFunction(id)">open modal</a>

and changed it to:

<a href="javascript:void(0)" onclick="myFunction(id)">open modal</a>

and this solved the scrolling to top problem.

I am using bootstrap 3.3.7 I believe.

answered Oct 06 '16 at 22:55

jfsiman

201
2
2

Worked for me. Thanks – Alpana Chauhan Oct 18 '17 at 07:10

score 4 · Accepted Answer · answered Oct 09 '14 at 12:37

4

I found the problem was some CSS I used to always force a scrollbar. This CSS gave the body a height of 100%. As soon as I removed this the modal worked perfectly without scrolling to top.

answered Oct 09 '14 at 12:37

Dave Perry

56
2

score 1 · Answer 3 · answered Jan 17 '14 at 17:23

1

It could be the position of your modal code in the HTML tree, try moving it levels up or down.

answered Jan 17 '14 at 17:23

JelteF

3,021
2
27
35

2

How are you opening the window? via an anchor tag or button? If you're doing it with an anchor tag is the `href` value `#`? – Ty Bailey Jan 17 '14 at 17:54
Ty. I am. I'm doing something like this More Info Then when they click on it.. running an .ajax call to pull some data.. populate my modal.. then simply calling $('#modal').modal('show'); on complete – Christopher Jazinski Jan 17 '14 at 19:35
2

THANKS!! Something to do with the – Christopher Jazinski Jan 17 '14 at 19:44

score 1 · Answer 4 · answered Feb 20 '18 at 17:11

1

I found this answer resolves it more broadly: Bootstrap modal: background jumps to top on toggle

Just add the following CSS to your page:

body.modal-open {
    overflow: visible;
}

answered Feb 20 '18 at 17:11

Rozgonyi

1,027
13
27

Bootstrap v3 - Opening a modal window forces the page to scroll up to the top

4 Answers4

Linked