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 content 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 barIf 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.