Angular：动态侦听属性的模态对话框的价值更改，然后将/删除类添加到元素

Question

我一直在试图找到解决问题的解决方案：我有两个同级div标签。在第二个中，有一个按钮显示具有深色覆盖的模态对话框，但是，在我的示例中，第一个DIV坐在此模态对话框的顶部。我了解为什么（堆叠概念）的原因，但是我需要在不改变此结构的情况下创建一些工作解决方案。

模态对话框打开了布尔属性。有什么办法可以动态地聆听此属性的值，并在NGCLASS的帮助下，将第二个兄弟姐妹的Z索引更改为页面上最高的Z-索引，并在打开模式时，并删除此NGCLASS，只要模态无需屏幕上打开更长的时间？

非常感谢您的任何帮助或建议。

<div style='z-index: 2'></div>
<div style='z-index: 1'>
    <button (click)="openModal()">Open modal</button>
    <div id="modal" style='z-index: 3'>Here is the modal content</div>
</div>

Answer 1

If changing structure is an option, I would recommend @Drenai's approch in the

首先，正如您提到的，在控制器中维护布尔值变量，该变量说明模态是否打开。 （让我们命名 iSmodaloped 。）

export class MyComponent {
    public isModalOpened = false;
}

在您的样式表中，位置 div＃modal recient;延伸到屏幕的末端。 div＃modal 将用作模态内容的覆盖，而模态将用作实际模态框。

/* the modal (background) */
#modal {
    position: fixed;                     /* Stay in place */
    z-index: 1;                          /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;                         /* Full width */
    height: 100%;                        /* Full height */
    overflow: auto;                      /* Enable scroll if needed */
    background-color: rgb(0,0,0);        /* Fallback color */
    background-color: rgba(0,0,0,0.4);   /* Black w/ opacity */
}

/* modal box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* modal close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

在您的html中，将模态的内容包装在 .modal-content div中，然后使用 ismodalopened 才有条件地呈现模态。

<div>In 1st div tag.</div>

<div>
    <!-- set modal state to "open" when clicked -->
    <button (click)="isModalOpened = true">Open modal</button>

    <!-- render modal content when state is "open" -->
    <div id="modal" *ngIf="isModalOpened">

        <div class="modal-content">
           <p>Here is the modal content</p>

           <!-- set modal state to "close" when clicked -->
           <button class="close" (click)="isModalOpened = false">×</button>
        </div>

    </div>

</div>

请注意，当单击“打开模态”按钮时， iSmodaloped 将设置为 true ，同时单击模态的关闭按钮集 ismodalopened < false 。这样，模态的打开和关闭功能应起作用，而在 fileve 模态的位置 解决您的z索引问题时。