会话超时模式隐藏在已打开的对话框后面

Question

这是带有Bootstrap4应用程序的Angular4，我有会话超时模式，如果打开了另一个模式（它显示在第二个模式的顶部），它可以很好地工作，但是问题是如果对话框打开，会话超时模式显示在后面对话框。我已经将会话超时模式的z-index设置为99999！important，并且对话框z-index设置为非常小的值，仍然存在问题。我知道这是CSS样式问题吗？我还错过了什么？我希望会话超时模式显示在对话框顶部

下面是对话框的代码

<div class= "row">
    <dialog id="d1">            
    </dialog>
</div>

CSS：

 dialog#d1 {
            top:50px;
            width: 200px;
            height: 300px;
            z-index: 5;  
            position: fixed;      
        }  

下面是sessionTimeout模式示例的简单代码，当达到超时时，DialogService将调用会话超时模式 [https://embed.plnkr.co/plunk/4ey4Mn][1]

模态的CSS设置为

.custom-show {
    z-index: 99000 !important;
}