9

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

4

5 回答 5

16

这只是将一些 CSS 应用于pleaseWaitDialogID 的问题。您必须设置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;
}

您将需要使用数字来获得适合您想要的盒子大小，但这应该让您开始。

于 2013-09-09T04:38:40.417 回答
4

这是另一个建议，它不涉及边距的硬编码。它正在使用 Angular，但您可以用 $ 替换元素。它为边缘设置动画，模拟引导程序中的“淡入淡出”类。

        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);
        };
于 2013-10-30T16:22:32.317 回答
2

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

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

所有功劳归谢尔盖·巴尔斯基所有。

于 2013-11-01T06:56:57.920 回答
2

我知道这有点晚了，但我找到了解决所有问题的解决方案，将 Bootstrap 模态与标准（一个）不同的高度居中。

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});
于 2014-02-13T08:54:05.237 回答
0

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

  1. 我已将附加类名“width-auto”附加到对话框 div“模态”。（在我的情况下，它是在“windowClass”参数的帮助下完成的）

  2. 我写了 SCSS 代码：

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

它解决了这个问题。

于 2017-04-13T09:30:42.323 回答