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.
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('show') and it still scrolls to the top of the page. Bootstrap v3.2.0 –
Enamour position: inherit to this class but worked like a charm after that. –
Xylograph 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.
In bootstrap 3.1.1 I solved with this solution:
body.modal-open {
position: absolute !important;
}
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');
}
The easiest way to solve the jumping background is to define two parameters:
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}
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.
I tried to set .modal top at the center of the screen.
.modal {
position: absolute;
top: 50%;
}
Just my 2cents of thoughts.
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.
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>
body.modal-open {
overflow: visible !important;
}
I needed the important attribute for it to fix it
body.modal-open {
position: inherit;
}
This worked like a charm for me.
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;
}
}
Removing the href="#" absolutely solved it in my case
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>
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.
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.
This one did it for me
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
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.
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>
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.
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();
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.
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.
Try this it works perfectly
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
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
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.
© 2022 - 2024 — McMap. All rights reserved.