模态框进入褪色模式 - ngx-modal（Angular 2）

Question

我正在使用here中的模态框。

当我触发它时，它以褪色模式显示。我不知道背后的原因是什么。

 <button (click)="myModal.open()">open my modal</button>
<modal #myModal style='z-index:999' >
    <modal-header>
        <h1>Modal header</h1>
    </modal-header>
    <modal-content>
        Hello Modal!
    </modal-content>
    <modal-footer>
        <button class="btn btn-primary" (click)="myModal.close()">close</button>
    </modal-footer>
</modal>

以下是图片：

如果有人知道什么是问题，那对我来说真的很有帮助。

Answer 1

我有同样的问题，我找到了原因，但没有找到解决方案。我假设你有同样的问题。问题是位置属性。如果位置固定为粘性，则由于某种原因，淡入淡出将位于顶部。在我的情况下，我希望该组件是固定的位置，并始终在底部，所以我必须找到一些解决方案如何让它在顶部。

<div class="player">
    <my-player></my-player>
</div>

这是问题所在的相应风格

.player{
    position: fixed;
    bottom: 0;
    height: 150px;
    background-color: black;
    width: 100%;
}

这是我的模态所在的我的玩家。这是我的组件的摘录，我只粘贴相关信息。

<a id="lyrics" (click)="myLyricsModal.open(); $event.stopPropagation(); lyrics()" data-toggle="tooltip" title="Lyrics" class="control-button glyphicon glyphicon-align-center"></a>          
<modal class="mymodal" #myLyricsModal modalClass="modal-lg">
    <modal-header>
        <h1>Lyrics for: {{lyricHeader}}</h1>
    </modal-header>
    <modal-content>
        <pre class="lyric">
            {{lyric}}
            </pre>
    </modal-content>
    <modal-footer>
        <img class="pull-left" [src]="lyricImageUrl | safe">
        <button class="btn btn-primary" (click)="myLyricsModal.close()">close</button>
    </modal-footer>
</modal>

因此，例如，如果我将玩家级别的位置设置为绝对，那么模式将在淡入淡出的基础上正确显示，但之后我的玩家不会被固定为始终位于UI的底部。 （我用100vh）

因此，如果这有助于您弄清楚如何修复您的网站，我想知道位置更改是否有帮助，或者您是否知道哪个元素的z-index应设置为正确，或者您是否做了其他事情。