Question

我得到的印象是Bootstrap 3.3.2模式仍然需要大量工作。令人讨厌的错误 Open modal is shifting body content to the left #9855 仍然无法解决，请参阅此处 Modify scrollbar check, stop static nav shift #13103 （评论在底部），不，即使是现场BS网站上的默认模式不居中，我认为错误＃9855（上面链接）也导致了 Modal hides the vertical browser scrollbar #1081 。

如果您将BS站点作为代码示例Bootstrap modal optional sizes进行检查，请单击一个体面视口宽度的大型或小型模拟演示，模式“似乎”居中。虽然它不。

当调整浏览器大小以使模态几乎填满视口宽度时，可以清楚地观察到模态倾向于浏览器的左侧，我假设由于Bootstrap弄乱了滚动条宽度计算或者通常会弄乱圆形滚动条及其宽度。

现在有两个选项，要么使用不是来自BS的模态插件（有很多模态插件可以在视口中完全水平和垂直居中以及响应），或者，不知何故开始进行一些工作进入BS模式并解决这些问题。

我仍然试图使用BS默认模态并且尝试将其居中（在这种情况下是水平）放在所有视口大小上，考虑到是否显示垂直滚动条，具体取决于模态的高度。

从这个漂亮的例子Centering Percentage Width/Height Elements中可以看出，可以使元素居中，甚至在视口中也有百分比值作为宽度和高度。

要回答我的问题，Chris Coyier会展示这项技术，你有一个示例代码，Codepen: Percentage sized and still centered可以使用BS 3.3.2吗？

  div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

我确信那里有很多开发人员都有这个完全相同的问题，只需将模态定位在所有视口大小上，有或没有垂直滚动条。 Chris的例子适用于垂直滚动条。那么将.modal对话框包装在一个div中，而Chris的中心技术最终会消除这个以及随后出现的错误？

如果显示或不显示垂直滚动条，如何将BS 3.3.2模态置于所有视口大小的中心，具体取决于模态的高度？

老实说，我对BS模式真的不感兴趣，乍一看它看起来一切都看起来很顺利但是如果你真的开始用它开发那么有很多问题出现并且已经很老了，它有点让我沮丧，所以请原谅我这里可能刺耳的语调。我只是真的想要使用BS而不必花时间如何解决其他插件似乎用几行代码完美掌握的问题。

真正非常感谢任何帮助或技术（包括代码）真正在视口中水平居中模式，无论是使用CSS还是jQuery。谢谢你的帮助。

Answer 1

我的方法似乎适用于所有视口大小垂直滚动条或不是测量BS 3.3.2适用于body.modal-open类的填充（17px来自哪里？）一旦模态打开并在模态的两侧应用此填充。

我在shown.bs.modal事件触发后将其包装在函数中，以确保模态已完成加载。对于远程内容，您可能需要应用loaded.bs.modal。

如果body.modal-open没有正确的填充，则填充也会从左侧移除。在最新版本的Chrome和Firefox中测试过。

$('#myModal').on('shown.bs.modal', function () {


    // meassure the padding-right given by BS and apply it as padding-left to the modal
    // like this equal padding on either side of the modal is given regardless of media query
    var modalPaddingRight = $('#myModal').css('padding-right');
    console.log ('modalPaddingRight = ' + modalPaddingRight);


    // apply the padding value from the right to the left
    $('#myModal').css('padding-left', modalPaddingRight);
    console.log ( 
            'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
            ' modalPaddingRight = ' + $('#myModal').css('padding-right')
            );


    // apply equal padding on window resize
    var modalPaddingLeft = function () {

        var modalPaddingRight = $('#myModal').css('padding-right');
        console.log ('modalPaddingRight = ' + modalPaddingRight);

        $('#myModal').css('padding-left', modalPaddingRight);
        console.log ( 
            'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
            'modalPaddingRight = ' + $('#myModal').css('padding-right')
            );
    };

    $(window).resize(modalPaddingLeft);
});

我不是jQuery的英雄，所以请如果有一种更优雅的方式来编写这个或另一个更快，更好，更好的方法来实现无论垂直滚动条存在或不，请告诉我。

谢谢：）

Answer 2

使用css我们可以将Bootstrap模态放在垂直中心。

    .modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin: -2px;
        height: 100%;
    }

    .modal-dialog {
        display: inline-block;
        vertical-align: middle;
    }

Bootstrap modal responsive vertical centering?

Bootstrap 3.3.2所有视口大小的中心模态，带或不带垂直滚动条

2 个答案: