2

我mdDialog在Angular Material我的项目中使用，但使用两种不同的方式：

方式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页面顶部，而不是在浏览器中间。

这两者有什么区别，有没有办法可以使Way 2css 样式与 相同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 回答