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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With