2

私は自分のプロジェクトで使用mdDialogしAngular Materialていますが、2 つの異なる方法を使用しています。

方法 1 :

  $mdDialog.show($mdDialog.confirm()
    .ok('Submit')
    .cancel('Cancel'));

confirmこれは、ブラウザの中央にダイアログを表示するデフォルトのダイアログを使用します。

md-dialog-container を次のように生成します。

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 2186px; height: 471px;">

方法 2 :

  var template = '<md-dialog>'
    + '    <md-dialog-content>'
    + '    </md-dialog-content>'
    + '    <md-dialog-actions>'
    + '      </md-dialog-actions>'
    + '</md-dialog>';

  $mdDialog.show({
      template: template,
      parent: angular.element(document.body),
      disableParentScroll: false
  });

md-dialog-container を次のように生成します。

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 471px;">

ただし、これはブラウザの途中ではなく、ページの上部に表示されますtop: 0px。md-dialog-container

これら2つの違いは何ですか?Way 2と同じcssスタイルにする方法はありWay 1ますか? ありがとう！

デモ：

http://codepen.io/anon/pen/amEdYv?editors=1010#0

http://codepen.io/anon/pen/PGEkKE (Angular Material を 0.7.1 などの古いバージョンに変更すると正しく表示されます)

4

1 に答える 1

-1

次のCSSエントリを追加することで、同じ結果に到達できましたmd-dialog。

md-dialog {
  height: auto;
  vertical-align: central;
  align-items: center;
}

codepen での例: http://codepen.io/ther/pen/YGYwBA

于 2016-10-05T08:56:37.040 に答える