Angular 2 ng-bootstrap open multiple models

Question

I am trying to open modal on top of another model using ng-bootstrap. Model is open as expected but the modal-backdrop of the second model is behind the fist model.

Models have opend as the document . Nothing special has done.

Answer 1

I managed to get this work as just by adding following css code.

.modal:nth-of-type(2) {
    z-index: 1051 !important;
}
.modal-backdrop:nth-of-type(2) {
    z-index: 1050 !important;
}

.modal:nth-of-type(3) {
    z-index: 1052 !important;
}
.modal-backdrop:nth-of-type(3) {
    z-index: 1051 !important;
} 

I want to open 3 nested models. That's why I added nth-of-type(2) and nth-of-type(3)

Answer 2

add this style to your code:

.modal {
    background: rgba(0,0,0,0.3);
}

and then disable modal-backdrop by setting the display to 'none'

OR

set aria-hidden="false" in your template inside div that contain mdbModal property