Opening a new modal causes page to scroll top

[lmartins]

This was solved on a old Bootstrap issue (https://github.com/twitter/bootstrap/issues/5336) but still persists on this plugin.

The issue is, when you open a modal from a long page, the page will scroll to the top and then opens the modal. When the modal is closed the pages stays at top.

Thanks.

[henrythe9th]

I was able to solve this by removing line 98 from bootstrap-modalmanager.js: that.setFocus();

Everything still seemed to work after removing this, and the page no longer scrolls in Chrome or Safari. Not sure what the unforeseen consequences are though...

[nediam]

got the same problem

[durandom]

if you are using rails and the asset pipeline, make sure the bootstrap-modal from this repository is included. i was using a bootstrap from a gem and /assets/bootstrap-modal.js got mounted by that gem. an easy fix is, to put the js files from this repo into a subfolder of your assets folder

[lmartins]

Ok, the issue is that the plugin is setting the focus on the modal, while the modal is still pulled away from the viewport. I've basically removed the slide-down animation, but a more definitive solution will probably involve changing the timing for the focus to happen.

[johnwp]

I'm running into the same problem. Disabling animation by way of removing the fade class doesn't seem to fix the issue for me. Increasing emulateTransitionEnd() from 300 to 10000 doesn't seem to help either.

[ivawzh]

got the same problem +1

[cpuguy83]

I think this is because your href is set to "#". Changing this fixed it for me.

[ivawzh]

Mine is a tag without href attribute. It just doesn't fix anything.

[taenaive]

I have the same problem too.

[jschr]

Anyone able to create a jsfiddle showing the issue? I have yet to encounter this problem.

[taylorhakes]

I have this issue only on mobile. Try the modal on iphone 4 or original Ipad.

http://getbootstrap.com/javascript/#modals Clicking the "launch demo modal" causes the page to scroll to the top.

[TobyTobias]

So the example on the bootstrap page doesn't scroll to top but mine does... http://getbootstrap.com/javascript/#modals

I've copied their code exactly and it still happens with my version using the same bootstrap.min.js v3.1.1

I can't replicate with jsfiddle, it stays in place too, http://jsfiddle.net/U7LUR/

This leads me to think it has something to with DOM structure, css and containers.

Removing fade didn't work, removing href="#"/data-target="#" didn't work. I can't remove that.setFocus(); as it doesn't seem to be in bootstrap.js.

A solution would be great as I really like the modal boxes but this problem is going to prevent the project going ahead unless resolved.

[jschr]

@TobyTobias you are referencing the default bootstrap modal. The docs for this plugin can be found at https://github.com/jschr/bootstrap-modal. I am unclear about whether you are actually using this plugin or not.

[TobyTobias]

@jschr my mistake, sorry.

[durandom]

As I mentioned here https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-26595552 this is something most people run into, that report this bug. Maybe renaming bootstrap-modal would help?

[penguinnorth]

cpuguy83 solved my problem. Thanks!

[KrutiRaghavan]

@cpuguy83...Thank u...changing href fixed it for me!

[rudrarakeshpaul]

change your href="#" to href="#responsive" visit our website rspate.com

[kiranpatil353]

change href="#" to href="javascript:;"

[billyshena]

Hello guys, when I first open a modal, it jumps to the top of my page. Is there a fix to avoid this behaviour?

Best,

[ChameleonRed]

Still problem is not solved.

[miguelmich]

I had the same problem and I realized, it was because of html{ overflow: scroll; } in my css. I hope you find this useful.

[damianpawski]

I have the same issue

[jcviau81]

I have the same issue but only in IE10 - 11, in some case it was scrolling the page to the bottom. Adding position fixed to body.modal-open made it scroll to the top instead but I can't find any solution to make it works properly in IE.

I narrowed to the point where I think it is a conflict with another JS that is included but I am in a AngularJS project and everything is JS.

Tried the normal Angular Bootstrap stack in a simple project and everything works fine even in IE.

At this point I am little out of resources, spent 3 days trying to debug that thing. Hope someone will have a working solution.

[shreyharia]

Is there fix for this problem? I am facing the same issue.

[jcviau81]

I did not found a fix to the problem but I did found a workaround.

What I did is get the current scroll position and re-apply the scroll position when I call the modal.open() with a timeout off 300ms to match the default modal animation duration. Kind of a hack more than a fix but working fine.

[MarkPieszak]

+1

Same issue... when you try to prevent the background/body from scrolling by the usual: body.modal-open { position:fixed; width:100%; } It automatically scrolls you to the Top...

I'll Post a fix if I can ever figure this out.

[GaleForceVR]

Adding this rule to my css fixed it globally for me:

body.modal-open {
    overflow: visible;
}

See this Stack Overflow post: http://stackoverflow.com/questions/21604674/bootstrap-modal-background-jumps-to-top-on-toggle

I have not confirmed this, but according to some of the comments, it was necessary in my case because I have body { height: 100%; } specified.

[giovannipds]

@GaleForceVR comment have helped here, thanks. :+1:

[alfijuan]

+1

Same

[rudrarakeshpaul]

change your html "" to "

" or "" and remove "href" attribute ..

check new bootstrap modal appear style..

http://rspate.com/2016/01/bootstrap-modal-display-in-new-style/

On Thu, Jan 21, 2016 at 6:43 PM, Juan Alfieri [email protected] wrote:

+1

Same

— Reply to this email directly or view it on GitHub https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-173564616 .

[alfijuan]

didn't work, but thnks

[stephengardner]

I'm using the Angular Material module in the same app and noticed angular material sets CSS on the <body> and <html> to height:100% and as @GaleForceVR mentioned, this height setting was in fact the problem.

[freeecoom]

In my case, I changed .modal-open{ position: relative} (it was "fixed" before) and it works.

[ThanawatMas]

.modal-open{ position: relative; }

This method really work!

[davinder-kumar]

#miguelmich thanks, i got the issue.

[umbe1987]

A developer friend of mine told me to substitute href="#" with href="javascript: return false" (similar to what @kiranpatil353 and @cpuguy83 suggested). Guess what.... it worked! Hope this could help.

[sudhanshu077]

When the bootstrap modal opens then .modal-open class is set to body tag. In this tag overflow:hidden is set. we have to change this. Add the below code in your CSS.

Reference :- www.latestphptutorials.com/?p=437

[ricky300300]

.modal-open { overflow: visible !important; }

worked for me

[jeetendraj2006]

I have solved this issue.

Please use following code:

var scrollPos = 0; $('.modal') .on('show.bs.modal', function (){ scrollPos = $('body').scrollTop(); $('body').css({ overflow: 'hidden', position: 'fixed', top : -scrollPos }); }) .on('hide.bs.modal', function (){ $('body').css({ overflow: '', position: '', top: '' }).scrollTop(scrollPos); });

[rev319303]

Here is what I had: href="#" and here is what fixed it for me: href="javascript:;"

Before I figured this out, I was using a javascript work around. I hope it is useful to someone.

$(".ApproveButton").click(function () { var scroll = $(document).scrollTop(); $('#ApproveModal').modal({ backdrop: 'static', keyboard: false }); $(document).scrollTop(scroll); });

When I clicked the button the page still jumped to the top but went right back down. Not the prettiest solution but the app was not public facing and the users didn't seem to care. The users just cared that they lost their scroll position.

[2297028416]

I basically solved the problem here. Open the modal before the record scroll position. Open modal after the location will be just returned to the scroll. The display does not have any effect on the page

var default_scrollTop = 0; $('.modal').on('show.bs.modal', function () { default_scrollTop = document.body.scrollTop; }); $('.modal').on('shown.bs.modal', function () { $('.modal-open').attr('style','overflow:visible !important;'); document.body.scrollTop = default_scrollTop; })

[AlonsoK28]

.modal-open{ position: relative; }

Worked for me =)

[binu-webaxyz]

Remove position fixed.

body .modal-open{ position:fixed; position:relative; }

[alb9913]

Replaced # with javascript:; in this statement and it worked. <a href="javascript:;"

[SabaKathawala]

Followed solution by: @kiranpatil353 and @cpuguy83 and @umbe1987 and worked

a="#.." makes the browser jump to the top of page. https://stackoverflow.com/questions/7755088/what-does-href-expression-a-href-javascript-a-do

To avoid this behavior you can also add e.preventDefault() on the click event of the anchor tag. This worked pretty well!! https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page

[capesean]

I had the same problem and I realized, it was because of html{ overflow: scroll; } in my css. I hope you find this useful.

I changed this to body{ overflow-y: scroll; } - did the trick.

[yohanelly95]

I think this is because your href is set to "#". Changing this fixed it for me.

You could also change the single '#' to using multiple hashes '###'. Fixed it for me.

[sennpang]

html{overflow: inherit} body.modal-open{overflow:hidden}(just set to body,not html and body);

[Andrei0401]

for WP please use

body.mobile.modal-open #wpwrap { overflow: hidden; position: relative; height: auto; }

[ice19942335]

I think this is because your href is set to "#". Changing this fixed it for me.

Thanks a lot!!!

[GanpatThakor1529]

use this code in Head

[bkaminski]

Removing the "href="#myModal" and replacing with "data-target="#myModal" fixed this for me.

[yrdesai]

use this code in Head

It worked. Thanks @GanpatThakor1529

[yrdesai]

It worked. Thanks.

[freakkiller]

The solution to this years old problem is quite simple (I spent hours searching for it too):

make sure that the body tag only has 'position: relative;' set via CSS and no height definition. Then you can also keep the default setting from bootstrap in the .modal-open class.

Because as soon as 'height: 100%;' is defined on the body tag, the undesired behavior occurs. If you want to make sure that the body always fills 100% of the window, you should set 'min-height: 100vh;' on the body tag. This definition has no influence on the document behavior when opening the modal.

[kmt9967]

@rudrarakeshpaul Thanks Bud You Saved me <3