Modal box coming in faded mode - ngx-modal (Angular 2)

Question

I am using modal box from here.

When ever I trigger it it is shown in faded mode. I don't know what would be the reason behind it.

 <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>

Here is the image:

If any one knows what is the issue it would be really helpful for me.

Answer 1

I have same problem and I found what was the reason but didn't found solution. I assume you have same problem. Problem is position property. If position is fixed of sticky that fade will be on top for some reason. In my case I want that component is fixed position and always on bottom so I must found some solution how to get it on top.

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

Here is corresponding style where the problem is

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

Here is my-player where my modal is located. This is excerpt of my component where I paste only related information.

<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>

So for example if I set player-class position to absolute then modal will be showed correctly on top of fade but then my player is not fixed to be always on bottom of UI. (I use 100vh)

So if this help you to figure out how to fix your site I'd like to know if position change help or did you figure out which element's z-index should be set to correct or did you do something else.