Twitter Bootstrap modal opening/closing causes fix

2020-04-02 07:21发布

站内问答 / HTML/CSS
981 13 6

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 Bootstrap modal opens and closes. On mobile devices there's no problem. The problem only occurs in larger viewports like desktops and laptops.

How to recreate

  1. Open http://www.domains.cloudlabz.nl/domains in a webbrowser and make sure you get a vertical scrollbar by lowering the viewport height.
  2. Click on one of the blue 'more info' buttons.
  3. Notice the jumping header and disappearing scrollbar once the modal opens.
  4. Close the modal and notice the header jumping back and the scrollbar reappearing.

Check the following image (same result in Opera, Safari, Firefox and Chrome):

Jumping header issue

What I'd like

I'd like the header to stop jumping when opening/closing a modal. The fact the scrollbar disappears is not an issue. Actually, I would like it to stay like that.

Update

I noticed the jumping header only occurs with fixed position elements such as my header (added Bootstrap class navbar-fixed-top). It even occurs on the Bootstrap website itself: http://getbootstrap.com/javascripts. Go to the 'Modals > Optional Sizes' area on a desktop and click one of the buttons. You'll see the right side menu jumping back and forth.

When the modal opens, the class .modal-open is added to the body element (thanks for pointing that out @Pred). It adds a padding of 15px to the right, which is the same width as the scrollbar gutter. This prevents the body from jumping back and forth.

Unfortunately this padding apparently does not apply to fixed elements.

13条回答
疯言疯语
2楼-- · 2020-04-02 07:29

Add the following to your CSS:

body {
  overflow: inherit;
  padding-right: 0 !important;
}
查看更多
0人赞 添加讨论(0) 举报
淡お忘
3楼-- · 2020-04-02 07:29

For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.

<script type="text/javascript">

    $('body').on('show.bs.modal', function () {
        $('.sticky-top').css('margin-left', '-=0px');
    });

    $('body').on('hidden.bs.modal', function () {
        $('.sticky-top').css('margin-left', 'auto');
    });

</script>

My page design was as follows

<header class="container">
    <div class="row">

    </div>
</header>

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg">
        This div jumped/shifted 17px to the right when opening a modal
    </nav>
</div>
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2020-04-02 07:30

All this happens because of this part of code in bootstrap.js:

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

That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).

For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).

NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.

Regards.

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
5楼-- · 2020-04-02 07:30

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) 举报
太酷不给撩
6楼-- · 2020-04-02 07:33

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) 举报
一纸荒年 Trace。
7楼-- · 2020-04-02 07:33

I have a structure:

<html>
<body>
  <nav class="navbar navbar-fixed-top">...</nav>
  <section>
    <div class="container">...</div>
  </section>
  <section>
    <div class="container">...</div>
  </section>
  <footer>...</foter>
</body>
</html>

I'm using this CSS:

body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)