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

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

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

Solutions/Answers:

Solution 1:

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.

Related:  Bootstrap.js throws a selector option error: selector option must be specified when initializing tooltip on the windows.document object

Solution 2:

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.

Solution 3:

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

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

Solution 5:

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

Solution 6:

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

Related:  What is NPM and why do I need it?

References