How to hide the body scroll bar when showing modal dialog?

Question

My home page has a lot of content. When I create any modal dialog, the body content scroll bar is visible and when we scroll, it scrolls down to the bottom of the page.

Answer 1

Add $('body').css('overflow','hidden') to your function that shows the modal, and $('body').css('overflow','scroll') to your function that closes the modal.

Answer 2

you can add this into bootstrap.js

Line:421

  this.$element.hide(), this.backdrop(function() {
  a.$body.removeClass("modal-open"),$('html').css('overflow','scroll'), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})

Line:397

this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()

Answer 3

When I used $('body').css('overflow','scroll') or $('body').css('overflow', 'inherit') the scroll bar appeared not at the right corner of the browser window, but on the edge of the page container...

I know that this issue because of layout and css styles of the particular site, but in this case changing the style of html tag seems to be more universal:

• $('html').css('overflow','hidden'); - hide scroll bar
• $('html').css('overflow','scroll'); - show scroll bar

Answer 4

If you wrap all of your body content in a wrapper div with overflow: hidden you can dynamically set the height of that div equal to the viewport height when you open your modal dialog.