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

Question

我在我的 AngularJS 项目中使用 Angular Material，并希望将警报窗口（由 alert() 函数打开）替换为 Angular Material dialog，以便样式保持一致。

我已经浏览了 Angular Material 提供的演示和文档，并将函数绑定到 ng-click。

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

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

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

在我目前的逻辑中，当单击按钮时，将调用一个服务来将数据发布到服务器。之后，我想显示带有“已成功保存”消息的警报。问题是，Angular Material 对话框将被弹出窗口覆盖。

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

Answer 1

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

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