Bootstrap V3 - Opening a Modal Window Forces the Page to Scroll Up to the Top

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



Leave a reply



Submit