9

画面の中央に待機画面のモーダル ダイアログを配置しようとしています。変更しようとしているモーダル ダイアログは次のとおりです: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap。水平方向と垂直方向の中央に配置するにはどうすればよいですか?

4

5 に答える 5

16

pleaseWaitDialogこれは、 IDに CSS を適用するだけの問題です。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

少し遅れていることはわかっていますが、Bootstrap Modal を標準 (1 つ) とは異なる高さでセンタリングすることに関するすべての問題の解決策を見つけました。

$("#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 に答える
2

私が使用した標準のjQuery/Coffeescriptの場合：

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

すべての功績は Sergey Barskiy にあります。

于 2013-11-01T06:56:57.920 に答える