Bootstrap modal 有一个缺陷答案

【问题标题】：Bootstrap modal has a flawBootstrap modal 有一个缺陷
【发布时间】：2013-09-04 04:18:57
【问题描述】：

当我在学习引导程序并尝试官方页面上的示例时，我发现modal 组件存在缺陷（可能）。

点击“Launch demo modal”，你会注意到右上角有一个明显的边距，当模态对话框消失/出现时，导航栏会拉伸/收缩。

这是一个错误还是故意的？我觉得它很烦人，如何禁用它？

【问题讨论】：

当我尝试它时，我看不出你在说什么。当模态出现时，导航栏根本不做任何事情。
这可能是由于模式显示时主窗口垂直滚动条出现/消失，但是我无法在我的 chrome 版本上重现它（我看到滚动条排序闪烁）
指明您使用的浏览器可能会有所帮助。如果是 IE，我可能会删除问题并卸载。
哦，是的，也许您看到滚动条出现/消失。对此做任何事情的唯一方法是确保您的对话框不超过窗口大小。
看到这个问题：github.com/twbs/bootstrap/issues/9855

标签： javascript css twitter-bootstrap

【解决方案1】：

要手动解决这个问题，只需添加

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

到在引导样式表之后应用的样式表。

如果你也想隐藏滚动条，你可以添加

.modal
{
    overflow-y: auto;
}

也是。

【讨论】：

为了进一步防止页面主体四处移动，请应用：body.modal-open {overflow-y: visible; }
@lilasquared - 现在这个修复不起作用 =( 有什么想法吗？
当页面上有滚动条时效果更好：stackoverflow.com/questions/19960162/…

【解决方案2】：

这是我找到的最佳解决方案：

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

【讨论】：

【解决方案3】：

这是一个已报告的引导问题：https://github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复，它使用固定顶部导航栏工作，仅使用 javascript。将此脚本与您的页面一起加载。

$(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);
};

下面是工作示例：http://jsbin.com/oHiPIJi/64

【讨论】：

【解决方案4】：

当原始页面已经有滚动条并且还没有滚动条时，一定要测试两者。

这适用于 v3.1.1。

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

【讨论】：

【解决方案5】：

除此之外，还要确保您有以下内容

html { overflow-y:auto; }

在你的样式表中阻止它向左移动

【讨论】：

【解决方案6】：

我也遇到过这个问题（bootstrap 3.1.1）。我正在打开一个模态框，但背景上缺少一个空间（如果模态框大于页面高度，则会出现滚动条），并且页面内容正在调整大小并向左移动。

我的布局使用固定的导航栏。

我添加了几个 CSS 选择器，它们似乎可以防止页面调整大小并确保模态背景填充屏幕

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;
}

如果页面和模态内容超过屏幕高度，我仍然觉得有两个滚动条有点奇怪，但我可以接受。

【讨论】：

【解决方案7】：

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

这对我有用

【讨论】：

【解决方案8】：

margin-right 在我的情况下不起作用，我找到padding-right 来解决问题。

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

【讨论】：

【解决方案9】：

我尝试了Agni Pradharma 的修复程序，但不得不稍微调整一下以使其正常工作。

我用这个让它工作了：

 $(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);
    };

【讨论】：