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

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.

In the dialog I also have to display a lot of content. So, if I can hide the body scroll bar and show only modal's scroll bar means, it would be a nice user experience.

The idea is, when showing a modal dialog and some scrollable content on top of it, to disable the main page scroll bar and only show the scroll bar for currently visible modal div.

What do I have to do to hide the body c开发者_StackOverflow中文版ontent scroll bar and show one in the modal div.

My client side is full of JavaScript & jQuery.

Any suggestions would be appreciative!

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

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

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.

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