javascript - Bootstrap modal has a flaw - Stack Overflow

admin管理员组

文章数量:1202594

As I was learning bootstrap and trying out the example on the official page, I found a flaw (maybe) with the modal component.

Click the "Launch demo modal", you will notice there is a notable margin on the top right corner, and the navbar will stretch/shrink when the modal dialog disappear/appear.

Is that a bug or intentional? I think it's annoying, How to disable it?

As I was learning bootstrap and trying out the example on the official page, I found a flaw (maybe) with the modal component.

Click the "Launch demo modal", you will notice there is a notable margin on the top right corner, and the navbar will stretch/shrink when the modal dialog disappear/appear.

Is that a bug or intentional? I think it's annoying, How to disable it?

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow edited Sep 2, 2013 at 19:25 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Aug 31, 2013 at 15:37 adamsmithadamsmith 5,99944 gold badges3030 silver badges4040 bronze badges 7

• I don't see what you're talking about when I try it. The nav bar doesn't do anything at all when the modal appears. – Pointy Commented Aug 31, 2013 at 15:39
• it is probably due to the main window vertical scrollbar appearing/disappering when the modal shows up, however i cannot reproduce it on my chrome version (i see the scrollbar sorta flash thoug) – guido Commented Aug 31, 2013 at 15:40
• 4 It may be helpful to indicate what browser your using. If its IE I would probably delete the question and uninstall. – Kevin Bowersox Commented Aug 31, 2013 at 15:40
• 1 Oh, yes perhaps you're seeing the scroll bar appear/disappear. The only way to do anything about it is to make sure your dialogs don't exceed the window size. – Pointy Commented Aug 31, 2013 at 15:43
• See this issue: github.com/twbs/bootstrap/issues/9855 – mbaird Commented Aug 31, 2013 at 15:45

 |  Show 2 more comments

9 Answers 9

Sorted by: Reset to default 7

To fix this manually simply add

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom 
{
    margin-right: 0px;
}

to a stylesheet that is applied after the bootstrap stylesheets.

If you want to hide the scrollbar as well you can add

.modal
{
    overflow-y: auto;
}

as well.

this is the best solution i found:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right: 0px !important;
    overflow-y: auto;
}

This is a reported issue to bootstrap: https://github.com/twbs/bootstrap/issues/9855

And this is my temporary quick fix and it's work using fixed top navbar, only using javascript. Load this script along with your page.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Here is the working example: http://jsbin.com/oHiPIJi/64

Be sure to test for both when the original page already has a scrollbar and does not already have a scrollbar.

This worked for me with v3.1.1.

html, .modal, .modal.in, .modal-backdrop.in {
    overflow-y: auto;
}

in addition to this also make sure you have the following

html { overflow-y:auto; }

in your stylesheet to stop it shifting left

I had this issue as well (bootstrap 3.1.1). I was opening a modal and there was a missing space on the backdrop (where a scroll bar will appear if the modal is greater than page height) and the content of the page was resizing and shifting to the left.

My layout uses a fixed navbar.

I added a couple of CSS selectors that seems to prevent the page resizing and ensuring that the modal-backdrop fills the screen

html {
    /* This prevents the page from shifting when a modal is opened e.g. search */
    overflow-y: auto;   
}
.modal,.modal.in,.modal-backdrop.in {
    /* These are to prevent the blank space for the scroll bar being displayed unless the modal is > page height */
    overflow-y: auto;
}

I still find it a bit odd where you can have two scroll bars if the page and the modal content is more than the screen height but I can live with that.

body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

this worked for me

margin-right did not work in my case, I found padding-right to solve the issue.

body.modal-open {
    padding-right: 0px;
}

I tried Agni Pradharma's fix, but had to slightly tweak it to make it work.

I got it working using this:

 $(document.body)
    .on('show.bs.modal', function () {
        if (this.clientHeight <= window.innerHeight) {
            return;
        }
        // Get scrollbar width
        var scrollbarWidth = getScrollBarWidth()
        if (scrollbarWidth) {
            $('.navbar-fixed-top').css('margin-right', scrollbarWidth);    
        }
    })
    .on('hide.bs.modal', function () {
        $('.navbar-fixed-top').css('margin-right', 0);
    });

    function getScrollBarWidth () {
        var inner = document.createElement('p');
        inner.style.width = "100%";
        inner.style.height = "200px";

        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "200px";
        outer.style.height = "150px";
        outer.style.overflow = "hidden";
        outer.appendChild (inner);

        document.body.appendChild (outer);
        var w1 = inner.offsetWidth;
        outer.style.overflow = 'scroll';
        var w2 = inner.offsetWidth;
        if (w1 == w2) w2 = outer.clientWidth;

        document.body.removeChild (outer);

        return (w1 - w2);
    };

本文标签： javascriptBootstrap modal has a flawStack Overflow