Twitter Bootstrap Question posted in

How to stop background from jumping to the top on modal toggle – Twitter bootstrap

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?

Tags:

7

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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;
//}
    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
  6. 0

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

    Login or Signup to reply.
  7. 0 
    .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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search