Bootstrap3-techniques to solve the bootstrap modal frame Toggle page jitter or page scroll bar

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.