2

I using twitter bootstrap modals on a one pager website. When I click on the button to open the modal, the background jumps to the top of the page and opens the modal. The same thing happens when you click the close buttons inside the modal.

I tried adding the code below to my CSS file. This stop the background from jumping to the top, however, I can now scroll through the background with the modal opened which I don't want as well. And also when my modal have overflows, I can see both the scroll bars for the modal and background. 

body.modal-open {
    overflow: visible;
}

Is there another way to solve this jumping problem without enabling the user to scroll through the background while the modal is opened?

Innocent Monareng
  • 129
  • 1
  • 2
  • 12

7 Answers7

3

If you have the height of either body or html is set to 100% as in my case, add the following to your CSS file:

html, body {
    overflow: scroll;
}

The background now should keep its original position.

Abdullah Alharbi
  • 311
  • 1
  • 5
  • 9
2

In case this helps anyone for this exact scenario, the following CSS solved the issue:

body.modal-open {
  position: inherit;
  overflow: visible;
}

body.modal-open .modal {
  overflow: hidden;
}

The first block allows the page scrollbar to show and prevents the jump to the top when opening the modal. The second block stops the modal overflow adding its own second scrollbar.

hughjdavey
  • 1,122
  • 2
  • 9
  • 17
1

Add following class in css:

.modal-opned {
  overflow-y:hidden;
}

add it to body tag when modal is opened and remove it when modal is closed.

sacgro
  • 459
  • 2
  • 5
  • According to the accepted answer to this problem [here](http://stackoverflow.com/questions/21604674/bootstrap-modal-background-jumps-to-top-on-toggle), that class is what courses the problem. Hence adding the class .modal-open {overflow: visible;} solves the problem. In my case adding the class solve the jumping problem but now creates another one with the scroll bar as I can now see 2 scroll bars when my modal have overflows. And I can also scroll through the background with a modal opened. Adding the class you suggested have no effect. – Innocent Monareng Aug 30 '16 at 09:12
1

As I also struggled for days with this problem, my solution was simple - I played with the HTML and I found that when the modal was closing .modal-backdrop was causing the issue. So I simply commented out this from my CSS and everything is fine now. Use your Browser inspector for problems like this!

//.modal-backdrop + #app-wrapper {
    //overflow: hidden;
//}
MartinG
  • 153
  • 1
  • 11
1
.modal-open{position: inherit}

This is because modal-open is a class added to body, when modal is opened. Make sure it's position is not fixed , If it's fixed make it inherit, that will help you to stay in the same place when popup is opened

Karthik BT
  • 11
  • 4
0

You can use the following code and it should work fine:

<div class="modal" id="modelId" role="dialog" aria-hidden="true" data-backdrop="true">
  <!--Model code -->
</div>

Assign the above id to any button or link and your model should load up just fine without any issues.

Navnit
  • 327
  • 1
  • 9
  • The problem I am having has nothing to do with button or link id. The modals do load, and on loading the background jumps to the top of the page... – Innocent Monareng Aug 30 '16 at 08:58
  • add a z-index value...say z-index: 9999; to the the model and it will work. Let me know – Navnit Aug 30 '16 at 09:19
0

I had the same issue and removing href="#" solved it.

desertnaut
  • 57,590
  • 26
  • 140
  • 166
8r4a5n7d2o7m4
  • 51
  • 6