Bootstrap modal: background jumps to top on toggle

Question

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.

can this help you, same issue: http://stackoverflow.com/questions/12894570/twitter-bootstrap-modal-scrolling-the-page-up-on-show — Mark, Feb 19 '14 at 13:34
this works for me [bootstrap-v3-opening-a-modal-window-forces-the-page-to-scroll-up-to-the-top](https://stackoverflow.com/a/39906849/7360570) — sen, Mar 09 '21 at 07:13

score 185 · Accepted Answer · answered Feb 19 '14 at 13:27

185

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.

answered Feb 19 '14 at 13:27

pstenstrm

6,339
5
41
62

@pstenstrm, I have a doubt. you told to override the css for .modal-open class. But, what if there is extra closing divs, and in my answer, I have not override any classes in my resolution? It works fine after removing 2 extra divs. bs modal adding .modal-backdrop div which will get confused where it needed to be closed because of extra closing tags. – Ravimallya Feb 27 '14 at 05:17
5

Does not work for me, I have the modal inside an iframe and it is scrolling to top... any ideas? – Cabuxa.Mapache May 05 '14 at 15:35
5

This fixed it for me. Just to add the root of my problem was 'body { height: 100% }'. – PeteG Jul 30 '14 at 11:36
26

Not working for me. I've got a vanilla modal that I'm opening with `.modal('show')` and it still scrolls to the top of the page. Bootstrap v3.2.0 – MandM Sep 04 '14 at 18:42
Works like charm! – Davinder Kumar Sep 07 '16 at 08:07
8

I had to add `position: inherit` to this class but worked like a charm after that. – adrian3martin Dec 06 '17 at 17:08
It works, I can scroll the screen below, and I love it. – paiego Dec 21 '17 at 22:22
This did not seem to work for me. Though the page did not scroll all the way to the top. rather a constant ~50 px gap. Tried with @adrian3martin 's suggestion too. – kneidels Feb 02 '22 at 15:40

score 33 · Answer 2 · answered Feb 06 '14 at 17:42

33

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>

answered Feb 06 '14 at 17:42

Gokhan Demirhan

1,099
10
14

I do open it exactly like you have posted there. Check out the link – FooBar Feb 07 '14 at 12:43
5

if you do not use the " – pagurix Feb 02 '16 at 16:19
3

@pagurix - Your comment worked best for my scenario. – AlfredBr Oct 26 '16 at 15:44
I think, @pagurix should write his comment as a separate answer. Only thing that helped. ThumbsUp! – Vibhor Dube Jan 15 '17 at 18:15
thank you, this was driving me nuts...I was opening with an anchor tag, changing it a div with an onclick fixed it. – rolinger Jul 18 '23 at 13:45

score 23 · Answer 3 · answered Jan 18 '17 at 15:37

23

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

answered Jan 18 '17 at 15:37

Nimesh Jain

283
2
4

score 17 · Answer 4 · answered Oct 31 '16 at 12:09

17

$('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

answered Oct 31 '16 at 12:09

Georgi Mirchev

261
3
6

score 6 · Answer 5 · answered Oct 24 '16 at 13:16

6

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.

answered Oct 24 '16 at 13:16

Dennis Heiden

757
8
16

score 5 · Answer 6 · edited Sep 30 '16 at 20:55

5

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.

edited Sep 30 '16 at 20:55

CoffeeRain

4,460
4
31
50

answered Feb 06 '14 at 13:59

billyJoe

2,034
2
24
37

Thank you - I shall look into this - even though I find it hard to believe that this could trigger the issue I am experiencing.It looks like you are using a plugin to track this - if so; which? – FooBar Feb 06 '14 at 14:57
1

i don't use plugin except firebug. It's always a good thing to check your page validity on http://validator.w3.org/. It would be an issue because if you have unclosed div, you will have strange behavior :) – billyJoe Feb 06 '14 at 15:09

score 5 · Answer 7 · answered Jul 29 '16 at 08:43

5

In bootstrap 3.1.1 I solved with this solution:

body.modal-open {
    position: absolute !important;
}

answered Jul 29 '16 at 08:43

Filo

2,829
1
21
36

2

You saved my day @Filo Thank you so much – vinothini Dec 08 '16 at 10:36

mpccolorado · Answer 8 · 2014-06-03T14:10:16.697

4

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');
}

edited Jun 03 '14 at 14:10

answered Jun 03 '14 at 13:38

mpccolorado

817
8
16

score 4 · Answer 9 · answered Jun 23 '19 at 17:26

4

The easiest way to solve the jumping background is to define two parameters:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}

answered Jun 23 '19 at 17:26

Nils

2,665
15
30

score 3 · Answer 10 · answered Feb 19 '14 at 13:46

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.

score 3 · Answer 11 · answered Feb 25 '14 at 13:13

3

I tried to set .modal top at the center of the screen.

.modal {
    position: absolute;
    top: 50%;
}

Just my 2cents of thoughts.

answered Feb 25 '14 at 13:13

Nils Thiebosch

148
8

1

Close enough. I won't downvote because my problem may be elsehere, but this caused the bottom half of the screen to be dimmed, but the modal was positioned towards the centre. – crafter Jan 05 '15 at 16:51

Ravimallya · Answer 12 · 2014-02-20T07:53:07.123

2

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.

enter image description here

edited Feb 20 '14 at 07:53

answered Feb 20 '14 at 07:47

Ravimallya

6,550
2
41
75

4

downvoted answers need proper comments with reasons. – Ravimallya Feb 27 '14 at 05:25
1

I don't downvote you but this answer doesn't help. It's not related to any problem, doesn't help any further users (can be categorized as typo) and probabily should be a coment. That's why some folks downvote you. – Leandro Bardelli Nov 24 '20 at 14:18

score 2 · Answer 13 · answered Feb 21 '14 at 00:54

2

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>

answered Feb 21 '14 at 00:54

scooterlord

15,124
11
49
68

score 2 · Answer 14 · answered Jan 11 '17 at 10:38

2

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

I needed the important attribute for it to fix it

answered Jan 11 '17 at 10:38

Dizzle

1,026
13
26

This worked for me, and I had @MandM's issue (in the comments) from pstenstrm's answer: "Not working for me. I've got a vanilla modal that I'm opening with .modal('show') and it still scrolls to the top of the page. Bootstrap v3.2.0". The only weird effect it has is that now the background will scroll if you keep scrolling a modal which is taller than the window, but this is a minor issue for me. Thanks. – dmgig Apr 11 '17 at 16:40

score 2 · Answer 15 · answered Apr 29 '18 at 12:08

2

body.modal-open { position: inherit; }

This worked like a charm for me.

answered Apr 29 '18 at 12:08

Nimish goel

2,561
6
27
42

score 2 · Answer 16 · edited Apr 09 '20 at 13:00

2

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;   
     } 
}

edited Apr 09 '20 at 13:00

Kalana

5,631
7
30
51

answered Apr 09 '20 at 11:58

sibashankar panda

21
1

score 2 · Answer 17 · answered Jan 11 '21 at 11:34

2

Removing the href="#" absolutely solved it in my case

answered Jan 11 '21 at 11:34

8r4a5n7d2o7m4

51
6

score 1 · Answer 18 · answered Sep 03 '14 at 17:20

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">&times;</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>

Thisi is the best solution. Do not search another thins. – maverabil Feb 23 '23 at 17:32 — maverabil, Feb 23 '23 at 17:32

score 1 · Answer 19 · answered Sep 21 '18 at 18:47

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.

Anjali Rawat · Answer 20 · 2021-08-07T08:38:29.893

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.

score 0 · Answer 21 · answered Feb 10 '16 at 08:13

0

This one did it for me

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

answered Feb 10 '16 at 08:13

warkitty

106
3
5

score 0 · Answer 22 · answered Nov 02 '16 at 16:34

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.

score 0 · Answer 23 · answered Nov 03 '17 at 09:55

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>

score 0 · Answer 24 · answered Oct 15 '18 at 07:39

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.

score 0 · Answer 25 · answered Jan 29 '19 at 12:06

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();

score 0 · Answer 26 · answered Nov 04 '20 at 13:22

0

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.

answered Nov 04 '20 at 13:22

Phil Owen

87
4
7

score 0 · Answer 27 · answered Oct 30 '21 at 00:49

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.

score -1 · Answer 28 · answered Oct 09 '14 at 11:50

-1

Try this it works perfectly

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}

answered Oct 09 '14 at 11:50

minimit

29
4

score -1 · Answer 29 · edited Jun 20 '20 at 09:12

-1

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 10 '18 at 10:31

ali Sharifi

1
2

score -3 · Answer 30 · answered Feb 26 '14 at 10:56

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.

Bootstrap modal: background jumps to top on toggle

30 Answers30

just enough, added one of two css code in your style

Linked