Twitter Bootstrap - 居中模态对话框

Question

Twitter Bootstrap - 居中模态对话框

9

我正在尝试将等待屏幕模态对话框居中在屏幕中央。这是我想要修改的模态对话框：http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap。我该如何水平和垂直居中它？

- Anonymous1

5个回答

4

这里有另一个建议，不需要硬编码边距。它使用Angular，但你可以用$替换元素。它通过动画效果模拟bootstrap中的'fade'类来实现边距的渐变。

        var resize = function () {
            var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
            dialog.css('margin-top', (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')));
        };

        var animate = function () {

            var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
            dialog.animate({ 'margin-top': (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')) }, 'slow');
            pleaseWaitDiv.off('shown.bs.modal', animate);

        };

        this.showPleaseWait = function () {
            angular.element($window).on('resize', resize);
            pleaseWaitDiv.on('shown.bs.modal', animate);
            pleaseWaitDiv.modal();
        };

        this.hidePleaseWait = function () {
            pleaseWaitDiv.modal('hide');
            angular.element($window).off('resize', resize);
        };

- Sergey Barskiy

2

我知道可能有点晚，但我找到了解决方案，可以使Bootstrap Modal居中显示，即使高度与标准（one）不同。

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});

- alex89x

使用负边距会导致模态窗口超出屏幕范围。去掉负号则会导致其太低。 - Adam Lewis

2

对于标准的jQuery/Coffeescript代码，我使用了以下内容：

modal = $('.modal')
modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top'))

所有功劳归功于Sergey Barskiy。

- Micah Winkelspecht

这很棒，但如果用户已经滚动到足够远的位置，那么模态框就不会被看到。您可以通过修改顶部边距来考虑用户滚动的量：dialog.css("margin-top", Math.max(0, ($(window).scrollTop()) + ($(window).height() - dialog.height()) / 2 )); - hellojebus

0

我在尝试在Angular的UI Bootstrap模态框中显示任意大小的图像时遇到了这样的问题。

我向对话框div“modal”附加了额外的类名“width-auto”。（在我的情况下，是通过“windowClass”参数完成的）
我编写了SCSS代码：

.width-auto { &.modal { text-align: center; } .modal-dialog, .modal-content { display: inline-block; width: auto; max-width: 99vw; overflow: hidden; } }

这解决了问题。

- Alexander Levakov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- crazymatt · Accepted Answer

这只是应用一些CSS到pleaseWaitDialog ID的问题。您需要设置position:absolute，margin-top 和 margin-left 必须是高度和宽度的一半。所以您的CSS应该长这样：

#pleaseWaitDialog {
  position: absolute;
  margin-top: 50px; /* half of the height */
  margin-left: 50px; /* half of the width */
}

#pleaseWaitDialog {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -200px;
    padding: 20px;
}

你需要调整数字以达到符合你想要的盒子大小，但这应该能让你开始。