Bootstrap v3 - Opening a modal window forces the page to scroll up to the top
I found the problem was some CSS I used to always force a scrollbar. This CSS gave the body a height of 100%. As soon as I removed this the modal worked perfectly without scrolling to top.
Bootstrap modal: background jumps to top on toggle
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.
modal window is causing the parent page body to scroll to the top
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;
}
Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems
this is what i found in github when i search about this problem and for me it works fine
js:
$(document).ready(function () {
$('.modal').on('show.bs.modal', function () {
if ($(document).height() > $(window).height()) {
// no-scroll
$('body').addClass("modal-open-noscroll");
}
else {
$('body').removeClass("modal-open-noscroll");
}
});
$('.modal').on('hide.bs.modal', function () {
$('body').removeClass("modal-open-noscroll");
});
})
css use this css if you have nav-fixed-top and navbar-fixed-bottom:
body.modal-open-noscroll
{
margin-right: 0!important;
overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
margin-right: 0!important;
}
or user this css if you have navbar-default
body.modal-open-noscroll
{
margin-right: 0!important;
overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default
{
margin-right: 0!important;
}
Bootbox modal scrolls to top of page before opening
If you don't need Bootbox (based on requirements in this question it seems overkill) then what you want sounds like what Bootstrap offers out of the box with it's modal loading remote content. You can have all your different modal 'contents' store as individual pages and then have each link point to a different piece of modal content. E.g:
<a href="path_to_remote_content" data-toggle="modal" data-target="#modal" id="branding1">
.
This technique would require you to have the empty modal code in your page already, and then the contents are loaded into the .modal-content
.
Modal HTML for page
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Remote content HTML
<div class="modal-header">
<h4>Beach Me</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
You'll need to remove all of the styles you've added that override Bootstrap's modal styles.
Demo
Related Topics
Dropdown Image Not Visible in Chrome and Ie
How to Check If Text Is Truncated by CSS Using JavaScript
Auto Tab to Next Input Field When Fill 4 Characters
Change CSS Link Property Onclick with JavaScript/Jquery
Find Unused CSS Rule and Js Script in a Web Project
Checking for Scrollheight of an Element Sometimes Returning 0
Position Sticky: Scrollable, When Longer Than Viewport
Facebook Oauth "Unsupported" in Chrome on iOS
How to Replay a CSS3 Animation in Reactjs
How to Check If Character Isn't Supported by the User's Browser in JavaScript
Is JavaScript Execution Deferred Until CSSom Is Built or Not
Bootstrap Dropdown Checkbox Select
Fastest Way to Preload/Load Large Images