发表新帖
发表新帖

Twitter Bootstrap modal opening/closing causes fixed header to jump

后端 未结
关注
14 2291
旧时难觅i
旧时难觅i 2021-01-08 01:39

I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can\'t seem to fix: a jumpy header when a Twitter Bootst

相关标签:
14条回答
  • 囚心锁ツ
    2021-01-08 01:45

    In my case, it can be solved by adding comments or remove these two lines right: 0; and left: 0; in bootstrap.css file:

    .navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  /* right: 0;
  left: 0; */
  z-index: 1030;
}

    Note: I use bootstrap v3.3.7

    0 讨论(0)
  • 误落风尘
    2021-01-08 01:49

    As you usually put Bootstrap navbar as a direct child of the body container:

    <body>
  <nav class="navbar navbar-fixed-top">...</nav>
</body>

    You can use the body padding-right value, calculated in the Bootstrap core code to prevent it from "jumping" when opening a modal window, to fix the navbar issue as well . A pure CSS solution is below:

    .navbar-fixed-top {
  padding-right: inherit;
}

    Easy as that.

    0 讨论(0)
  • 自闭症患者
    2021-01-08 01:50

    This one only works if you know your page content is longer than the viewport (so any long scrolling page). You can just add the following to your CSS - 

    html {
  overflow-y: scroll;
}

.modal-open {
  padding-right: 0!important;
}
    0 讨论(0)
  • 自闭症患者
    2021-01-08 01:50

    I manually change bootstap.js:

    before change 

    Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
  }

    after change: 

      Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
    if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
    $('.navbar-fixed-top').css('padding-right', '')
  }
    0 讨论(0)
  • 無奈伤痛
    2021-01-08 01:51

    When the modal opens, the "modal-open" class is added to the HTML <body> element which hides overflow. You can change this by over-writing the "modal-open" class with overflow: inherit. This will keep the scrollbar in view, just as it is when the modal is closed. Keep in mind that this will change the overflow option whenever any modal is opened on the page. Hope this helps. Good luck!

    0 讨论(0)
  • 庸人自扰
    2021-01-08 01:52

    I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping. This might not be the best solution but for now it works just fine.

    Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops

    <script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

    If you know a better solution (preferably CSS3 only), please let me know. Thanks for all the help!

    0 讨论(0)
 看不清?
提交回复
热议问题