Question

我试图将等待屏幕模式对话框置于屏幕中间。这是我试图改变的模态对话框：http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap。如何水平和垂直居中？

Answer 1

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

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

您需要使用这些数字才能达到符合您想要的尺寸，但这应该可以让您开始使用。

Answer 2

这是另一个建议，不涉及边距的硬编码。它使用的是Angular，但你可以用$替换元素。它激活了边距，模拟了bootstrap中的“淡入淡出”类。

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

Answer 3

我知道这有点晚了，但我找到了解决所有问题的方法，将Bootstrap Modal集中在不同于标准（一个）的高度。

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

Answer 4

对于我使用的标准jQuery / Coffeescript：

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

所有功劳都归功于Sergey Barskiy。

Answer 5

我在Angular的UI Bootstrap模式中尝试显示图像（任意大小）时遇到了这样的问题。所以

我在对话框div“modal”中添加了附加类名“width-auto”。（在我的情况下，它是在“windowClass”参数的帮助下完成的）
我写过SCSS代码：

.width-auto { ＆amp; .modal { text-align：center; } .modal-dialog，.modal-content { display：inline-block; 宽度：自动; 最大宽度：99vw; 溢出：隐藏; } }

它解决了这个问题。

Twitter Bootstrap - 中心模态对话框

5 个答案: