Angular Material $mdDialog 被 Kendo 弹出窗口覆盖 window

Question

我在我的 AngularJS 项目中使用 Angular Material，并想用 Angular Material dialog 替换警报 windows（由 alert() 函数打开），以便风格会保持一致。

看了Angular Material提供的demo和文档，把函数绑定到了ng-click上。

<md-button class="md-primary md-raised" ng-click="showAlert($event)"   >
  Save
</md-button>

按钮位于弹出窗口 Kendo window 内，由 kWindow.open() 函数打开。

var windowInstance = $kWindow.open({
                /// Logic omitted
            });

在我目前的逻辑中，当按钮被点击时，一个服务将被调用以post数据到服务器。之后，我想显示带有消息 "Saved successfully" 的警报。问题是，Angular Material 对话框将被弹出 window.

覆盖

如何解决此问题，以便对话框像警报 window 一样显示在顶部？

Answer 1

我调查了一下发现可以在CSS文件中设置Angular Material对话框的z-index属性来改变层高。在我的例子中，10000 仍然被 window 覆盖，而 20000 正常工作。

.md-dialog-container {
    z-index: 20000;
}