How to prevent scrolling of the body content when bootstrap modal is open

Question

I am using Angular UI Bootstrap Modal box. When the modal opens the body has a scroll. When I scroll the content behind the modal also scrolls.

I can set overflow: hidden to the body tag and this solves the issue. However if I have alot of content within my modal I need a scroll to show. This scroll should not be inside the modal i.e When I use the page scroll the modal should only scroll and not the content. Plunker here

score 13 · Answer 1 · edited May 23 '17 at 12:10

13

A slight modification of dreamhigh's answer which worked well for me included adding position: fixed for iOS devices:

body.modal-open {
    position: fixed;
    overflow: hidden;
}

Furthermore adjusting the viewport to disable user scaling to keep inputs from automatically zooming and introducing scroll bars on the body content:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Credit to this post: Bootstrap 3: horizontal scrollbar on iPhone after form focus

With these two changes I was able to get angularjs modal forms to behave well on iOS.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 25 '15 at 17:34

Derek

897
1
10
12

be aware that, if you want to keep the current scroll position before/after modal, with this solution the users will be always scrolled to top automatically, which i would never want – akcasoy May 29 '19 at 05:47

score 11 · Accepted Answer · answered Dec 13 '13 at 10:55

11

I'm facing the very same problem actually, using UI Bootstrap, and came up with kind of a workaround. On opening the modal, you add a class (.ovh) to the body, that sets overflow to hidden. On closing/dismissing the modal, you remove that class, so that scrolling is possible again.

See my fork of your fiddle here: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

Note that I've placed the class in the index.html, just for demonstration purposes. Besides I injected $document in the controller definition, to use the reference provided by angular.

answered Dec 13 '13 at 10:55

martinczerwi

2,837
23
23

Thank you martin. I also figured out another way by using `$scope.$watch('show', function() {}` – Neil Dec 13 '13 at 12:27
If .ovh is not defined by Bootstrap or the library you are using, then you can add this to your CSS: `body.ovh { overflow: hidden; }`. Toggling this class on body will toggle scrollability. – Aniket Suryavanshi May 17 '16 at 19:38

score 6 · Answer 3 · answered Aug 30 '16 at 14:02

For those using Angular JS and the UI Bootstrap. Here is what it took for me to get it to work. My situation was a bit different. I had a Modal that worked and scrolled great. I then had a button on that modal that would pop another modal. Once that second modal was closed, the initial modal would no longer scroll. This is all it took:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}

score 4 · Answer 4 · answered Jun 07 '16 at 09:31

4

I just put below CSS and now the body scroll is hidden whenever modal popup is opened. I am using Angular UI Bootstrap.

.modal-open {
  overflow: hidden !important;
  position: relative
}

answered Jun 07 '16 at 09:31

Prashant

3,823
3
25
40

score 2 · Answer 5 · answered Jan 16 '15 at 12:29

When you add overflow:hidden, the background page scroll is hidden. However, the modal scroll will be visible as the page scroll and the modal will be set to scroll.

body.modal-open {
    overflow: hidden;
}

score 0 · Answer 6 · answered Jul 26 '16 at 13:34

In bootstrap js commmented line causes the problem, you can comment this line as i do.

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()

Stephen Howe · Answer 7 · 2016-11-22T07:22:08.040

For me the page scrolled when the dialog was being closed, so I fixed the ui-bootstrap-tpls.js file. The actual problem is that when dismissing the modal, removeModalWindow is being called with parameters 'modalInstance' and 'modalWindow.value.modalOpener'.

The second parameter is being used to focus on the element which triggered the modal window. Just remove the second parameter in the 'dismiss' and 'close function' and your page scroll effect will be solved.

'removeModalWindow(modalInstance, modalWindow.value.modalOpener)' becomes 'removeModalWindow(modalInstance)'

score 0 · Answer 8 · answered Mar 13 '21 at 20:02

0

I fixed this problem, with adding this code in global style:

.modal-open .modal {
  overflow: hidden;
}

.modal-open{
  height: 100vh;
}

you can do this, and you haven't scroll on modal open.

answered Mar 13 '21 at 20:02

Morteza Fathnia

435
3
12

How to prevent scrolling of the body content when bootstrap modal is open

8 Answers8

Linked