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">×</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
Remove
.modal-open {
overflow: hidden;
}
from modal.css line no 9
When the modal is open, the class modal-open
is added to the body
element.
In _modal.scss
, the style .modal-open { overflow: hidden; }
.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;
}
For me, all of the modals cause the page to scroll up. This is because upon opening the modal, the class .modal-open
is added to the body
. This class adds overflow: hidden;
to the body. Either remove this line or set to overflow: unset;
This will stop the automatic scroll to top, but scrolling will be possible, even if the modal is open.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.