Bootstrap modal: background jumps to top on toggle
JavascriptJqueryCssTwitter BootstrapTwitter Bootstrap-3Javascript Problem Overview
I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.
I have done everything I could to find a solution/etc, but I am really lost.
EDIT:
I have also tried with: $('#myModal').modal('show'); but it has the exact same effect.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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>
Solution 3 - Javascript
if you are using anchor tag as <a href"#" ..> ... </a> and href="#" is creating problem, remove that.
You can read more over here
Solution 4 - Javascript
$('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
Solution 5 - Javascript
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.
Solution 6 - Javascript
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. > >
This could be an issue.
Solution 7 - Javascript
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');
}
Solution 8 - Javascript
In bootstrap 3.1.1 I solved with this solution:
body.modal-open {
position: absolute !important;
}
Solution 9 - Javascript
The easiest way to solve the jumping background is to define two parameters:
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
Solution 10 - Javascript
I tried replicating this problem on my localhost and as weird as it may seem, there is a conflict with the Bootstrap JS file that you are using.
Try commenting your code of:
<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>
And instead use Bootstrap 2.3.2:
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
This made it work for me.
I tried it with Bootstrap version 3 but that didn't work. I am still unable to pinpoint the trouble part but somewhere along Firebug threw me a e.preventDefault() is not a function error - I am guessing this should be the root cause but I am yet to compare it with the other JS files.
Solution 11 - Javascript
I tried to set .modal top at the center of the screen.
.modal {
position: absolute;
top: 50%;
}
Just my 2cents of thoughts.
Solution 12 - Javascript
you have 2 extra closing div tags just before to the <div id="footer"> or after the <div id="mainFrame" class="group"> div. I'm using visual studio 2012 express to inspect this.
Please remove these 2 extra divs and let us know how it works. I removed extra divs and removed all custom scripts. retained only jquery core and bootstrap at the footer. here is the sreenshot of final output. here is the jsbin playground for you which is working fine.
I suggest you to use headjs to load all the scripts and css files. also it is not a good practice of loadidng any scripts twice.
Solution 13 - Javascript
Try using this to open modal and see what happens:
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
Solution 14 - Javascript
body.modal-open {
overflow: visible !important;
}
I needed the important attribute for it to fix it
Solution 15 - Javascript
body.modal-open { position: inherit; }
This worked like a charm for me.
Solution 16 - Javascript
If you are facing this issue in an Angular program add the below code at the first line of .scss file.
::ng-deep {
body.modal-open {
overflow: visible !important;
position: absolute !important;
}
}
Solution 17 - Javascript
Removing the href="#" absolutely solved it in my case
Solution 18 - Javascript
I spent hours on this trying everything here and elsewhere. For angularjs-material usage, turned out I had to disable animation on the uibModal.open config object arg.
For example:
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);
Hope this helps someone else.
Solution 19 - Javascript
I was also facing the same problem. Whenever modal popup opened the page scrolled to the top. I looked everywhere and tried all the ideas mentioned above but none of them really helped me. Except for the one with body.modal-open css.
So I added
body.modal-open {
overflow: visible;
position: relative;
overflow-x: hidden;
}
This to my CSS file which fixed the problem of scrolling to the top but it added 2 scrollers to the page, for which I came with a solution to actually add a CSS to the HTML tag itself. I don't know if it is ethical for coding or not but we are designers and we can give styling to HTML tag so I did. I added some jquery
$(document)
.on('show.bs.modal', '.modal', function () { $('html').css('overflow', 'hidden')})
.on('hidden.bs.modal', '.modal', function () { $('html').css('overflow', 'auto') })
for toggling the scrollbar of HTML and it worked for me.
Solution 20 - Javascript
I had the same problem and I think I figure it out. You just need to place the modal HTML as a direct child of the body tag! You can place the HTML code for the button triggering the modal wherever you need though. I believe this avoids CSS inheritance and position issues that trigger this problem.
Example:
<body>
<!-- All your other HTML code -->
<div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
Solution 21 - Javascript
Finally figured this one out. Do NOT wrap the button targeting the modal in an anchor tag.
Bad
<a href"#">
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>
Good
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
Solution 22 - Javascript
This one did it for me
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
Solution 23 - Javascript
After reading dozens answers over several hours I copied the original code from the bootstrap file again and debugged step by step to see what caused that I always jump to the top. Because the actual latest version of Bootstrap 3 is showing the modal at the position you're at right now.
I had found out that -webkit-transform: translate3d(0,0,0); and height: 100% in my css body-tag caused this behaviour. Maybe this helps some one.
Solution 24 - Javascript
For me works when I changed the version from 3.1.1 to 3.3.7
If you do not have to use version 3.3.1 try replacing.
After the change, it is good to check that the rest of the function works correctly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Solution 25 - Javascript
I tried all of the above examples - this is the only thing that worked for me:
.modal-open {
padding-right: 0 !important;
}
Removing the padding from the right side of the model - prevents the jump.
Solution 26 - Javascript
I got the same issue and none of answers helped me. Found a workaround which looks stupid but it works at least in my case.
I found that page is scrolling to top only once and after that next opened modals works as expected. Than I found that hiding of any element in the DOM initiates the same strange scroll. So I just creating a dummy div after page load than hidding and removing it and this solved the issue.
var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
Solution 27 - Javascript
I find it easier with this:
overflow-y: hidden;
When applied to the body class on modal opening - this prevents the vertical scroll of the body in the background and allows the user to stay in the same place without the scroll to top also.
Solution 28 - Javascript
The default 'overflow' style of 'body' element is:
body {
overflow: visible;
}
In my page the 'overflow' style was changed to:
body {
overflow-y: hidden;
}
Then I've discovered that when modal is open, the 'modal-open' class is added to the 'body' element.
The 'modal-open' class mess with 'overflow' style and causes the page or inner element to scroll up.
To prevent this I need to keep the same settings before and after the 'modal-open' class is added to the 'body' element.
So I've added this section in my CSS file:
body.modal-open {
overflow: visible;
overflow-y: hidden;
}
Now both 'overflow' and 'overflow-y' are the same for 'body' element, before and after 'modal-open' is added to the 'body' element.
Maybe you need to add 'overflow-x' or another style element, just adapt to your case.
Solution 29 - Javascript
Try this it works perfectly
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
Solution 30 - Javascript
it's good idea for fixed it, it's look like jock!
> ## just enough, added one of two css code in your style ##
>
>.body.modal-open { overflow:visible;padding-right:0px !important;}
>.body.modal-open { height:auto;padding-right:0px !important;}
https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449
Solution 31 - Javascript
If pstenstrm's answer doesn't work for you, try combining it with this replacement button HTML:
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>
This should keep the button on-screen.