Fix page jitter or page scroll bar when bootstrap modal frame toggle

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:

Solve modal page left and right move issue when Popup

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 '})  &nbSp;  }  }  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}

But that's how I use it:

(function ()  {var modal = {};//resolves Modal page-to-move issue when Popup modal.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.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 '   }} $ (' #addAppModal '). Modal (' hide '); $ (' #addAppModal '). On (' Show.bs.modal ', function  (event)  {   modal.adjustbody_beforeshow ();}); $ (' #addAppModal '). On (' Hidden.bs.modal ', function  (event)  {  modal.adjustbody_ Aftershow ();});}) ();

Fix page jitter or page scroll bar when bootstrap modal frame toggle