Bootstrap modal: background jumps to top on toggle

javascript jquery css twitter-bootstrap twitter-bootstrap-3

106,785

Solution 1

When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Solution 2

If you are calling modal with tag. Try removing '#' from href attribute.And call modal with data attributes.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Solution 3

if you are using anchor tag as <a href"#" ..> ... </a> and href="#" is creating problem, remove that. You can read more over here

Solution 4

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

This will help you to stop the scroll bar going on the top.It worked for me

Solution 5

Possibly working with modals nested somewhere in the code:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

For me it was a combination of position, height and overflow.

View more solutions

106,785

FooBar

Updated on July 08, 2022

Comments

FooBar almost 2 years

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.

I have done everything I could to find a solution/etc, but I am really lost.

EDIT:

I have also tried with: $('#myModal').modal('show'); but it has the exact same effect.
- Mark about 10 years
  
  can this help you, same issue: stackoverflow.com/questions/12894570/…
- sen about 3 years
  
  this works for me bootstrap-v3-opening-a-modal-window-forces-the-page-to-scrol‌l-up-to-the-top
FooBar over 10 years

Thank you - I shall look into this - even though I find it hard to believe that this could trigger the issue I am experiencing.It looks like you are using a plugin to track this - if so; which?
billyJoe over 10 years

i don't use plugin except firebug. It's always a good thing to check your page validity on validator.w3.org. It would be an issue because if you have unclosed div, you will have strange behavior :)
FooBar over 10 years

I do open it exactly like you have posted there. Check out the link
Ravimallya about 10 years

@pstenstrm, I have a doubt. you told to override the css for .modal-open class. But, what if there is extra closing divs, and in my answer, I have not override any classes in my resolution? It works fine after removing 2 extra divs. bs modal adding .modal-backdrop div which will get confused where it needed to be closed because of extra closing tags.
Ravimallya about 10 years

downvoted answers need proper comments with reasons.
Cabuxa.Mapache about 10 years

Does not work for me, I have the modal inside an iframe and it is scrolling to top... any ideas?
PeteG almost 10 years

This fixed it for me. Just to add the root of my problem was 'body { height: 100% }'.
MandM over 9 years

Not working for me. I've got a vanilla modal that I'm opening with .modal('show') and it still scrolls to the top of the page. Bootstrap v3.2.0
crafter over 9 years

Close enough. I won't downvote because my problem may be elsehere, but this caused the bottom half of the screen to be dimmed, but the modal was positioned towards the centre.
pagurix over 8 years

if you do not use the "<button>" but <a>, as in my case, you lose the icon "finger button" when you move the mouse cursor on the object. To overcome this, I have done so: ... href = "# mai_modal_id" data-toggle = "modal" ... and I did not use data-target
Davinder Kumar over 7 years

Works like charm!
AlfredBr over 7 years

@pagurix - Your comment worked best for my scenario.
vinothini over 7 years

You saved my day @Filo Thank you so much
Vibhor Dube over 7 years

I think, @pagurix should write his comment as a separate answer. Only thing that helped. ThumbsUp!
dmgig about 7 years

This worked for me, and I had @MandM's issue (in the comments) from pstenstrm's answer: "Not working for me. I've got a vanilla modal that I'm opening with .modal('show') and it still scrolls to the top of the page. Bootstrap v3.2.0". The only weird effect it has is that now the background will scroll if you keep scrolling a modal which is taller than the window, but this is a minor issue for me. Thanks.
adrian3martin over 6 years

I had to add position: inherit to this class but worked like a charm after that.
paiego over 6 years

It works, I can scroll the screen below, and I love it.
Leandro Bardelli over 3 years

I don't downvote you but this answer doesn't help. It's not related to any problem, doesn't help any further users (can be categorized as typo) and probabily should be a coment. That's why some folks downvote you.
kneidels over 2 years

This did not seem to work for me. Though the page did not scroll all the way to the top. rather a constant ~50 px gap. Tried with @adrian3martin 's suggestion too.