Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.


If you are calling modal with tag. Try removing '#' from href attribute.And call modal with data attributes.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

if you are using anchor tag as <a href"#" ..> ... </a> and href="#" is creating problem, remove that. You can read more over here


$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

This will help you to stop the scroll bar going on the top.It worked for me


Possibly working with modals nested somewhere in the code:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

For me it was a combination of position, height and overflow.


I don't see a specific error, but I would advise you to check your html syntax.

A tiny test with your source gives me errors like

Line 127, Column 34: Unclosed element div.

              <div class="inner onlySides">

This could be an issue.


I had the same issue using Bootstrap 2.3.2

It was a problem for clicking on a link:

The trick was: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

and the js:

function openModal() {
    $('#myModal').modal('show');
}