Search code examples
javascripthtmlcss

modal window is causing the parent page body to scroll to the top

i bought a theme and i am using the modal window feature. there is a button and when it is clicked the modal window opens. the coding is:-

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#largeModal">
Launch Large Modal
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>
         <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

you can test the theme preview here:- https://preview.oklerthemes.com/porto/7.2.0/elements-modals.html

scroll down in the page and then click on "Launch Large Modal". you will see that the parent page body stays where it is when the modal window is opened and closed

i used the exact same code in my website which is:- http://mdscomputers.ae/new/solutions.php

please scroll down and you will see test1, test2 and test3

for test1 you have to click on the word test1 to open the modal window. when the modal window opens the page body scrolls to the top. when you click on close then the parent page body stays at the top

for test2 you have to click anywhere in the box to open the modal window. the same issue as test1 happens

for test3 you have to click on the Launch Large Modal button. the parent page body will scroll to the top but when i close the modal window then the parent page body will scroll back down to the box

this is driving me crazy :( why is the parent page body scrolling to the top for me and why is it only scrolling down in test3 and not in test1 and test2?

i need to disable the parent page body from scrolling to the top when the modal window is opened

Solution

  • When the modal is open, the class modal-open is added to the body element.

    In _modal.scss, the style .modal-open { overflow: hidden; } removes the scrollbar of the body element. Removing the scrollbar on the body is forcing the scroll to the top.

    Edit:

    Add the following line to your custom.css:

    .modal-open {
    overflow: initial;
}