Bootstrap in order to have all pages (here refers to the content overflow and does not overflow) display the effect, the method is as follows:
When modal is displayed, set body-overflow:hidden;margin-right:15px; (set 15px because the browser's scroll bar occupies 15px); (by adding to the body when the modal is displayed. Modal-open class implementation)
Set modal--overflow:auto;overflow-y:scroll;
The effect of this setting is:
(1) When the content of the page exceeds (that is, the page itself has scroll bar), then the Moda pop-up, the original body scroll is forbidden, the body of the margin-right and modal scroll bar position overlap, at this time the page will not appear jitter phenomenon;
(2) When the content of the page is not exceeded (that is, the page itself does not exist scroll bar), then modal popup, because the body set margin-right, will make the page left offset, when modal closed, the body margin-right 0, the page is shifted to the right, Page jitter appears.
According to the above description, the idea of resolving page jitter is:
According to ScrollHeight and ClientHeight, the margin-right properties of the body overflow, modal, and. Overflow are adjusted before and after modal loading to override the styles in Bootstrap.css
The functions are as follows:
Resolve Modal Popup page left and right move problem Modal.prototype.adjustBody_beforeShow = function () { var body_scrollheight = $ (' body ') [ 0].scrollheight; var docheight = document.documentElement.clientHeight; if (Body_scrollheight > Docheight) { $ (' body '). CSS ({ ' overflow ': ' Hidden ', ' margin-right ': ' 15px ') }); $ ('. Modal '). css ({' overflow-y ': ' Scroll '}) }else{ $ (' body '). CSS ({ ' overflow ': ' Auto ', ' Margin-right ': ' 0 ' }); $ ('. Modal '). css ({' overflow-y ': ' Auto '}} }} Modal.prototype.adjustBody_afterShow = function () { var body_scrollheight = $ (' body ') [0].scrollheight; var docheight = document.documentElement.clientHeight; if (Body_scrollheight > Docheight) { $ (' body '). CSS ({ ' overflow ': ' Auto ', ' margin-right ': ' 0 ' ) }); } else{ $ (' body '). CSS ({ ' overflow ': ' Auto ', ' margin-right ': ' 0 ' }); } }
How to use the function:
Modal.prototype.show = function (_relatedtarget) { this.adjustbody_beforeshow (); ... other code}modal.prototype.hide = function (e) { this.adjustbody_aftershow (); ... other code}
Bootstrap3-techniques to solve the bootstrap modal frame Toggle page jitter or page scroll bar