Bootstrap modal opens on background (Angular)

Question

I have modal that I open from the table, that in the material tab

Here is Modal HTML

    <div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"

>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form
                *ngIf="active"
                #landlordPropertyPortfolioForm="ngForm"
                novalidate
                (ngSubmit)="saveWithReason()"
                autocomplete="off"
            >
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="landlordPropertyPortfolio.id">{{ l("EditLandlordPropertyPortfolio") }}</span>
                        <span *ngIf="!landlordPropertyPortfolio.id">{{ l("CreateNewLandlordPropertyPortfolio") }}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                     <div *ngIf="!isNew" class="form-group">
                        <label for="LandlordPropertyPortfolio_Name">{{ l("Id") }}</label>
                        <input
                            type="text"
                            id="LandlordPropertyPortfolio_Id"
                            class="form-control"
                            [(ngModel)]="landlordPropertyPortfolio.id"
                            name="Id"
                            readonly
                        />
                    </div>
                    <div class="form-group">
                        <label for="LandlordPropertyPortfolio_Name">{{ l("Name") }}</label>
                        <input
                            type="text"
                            id="LandlordPropertyPortfolio_Name"
                            class="form-control"
                            [(ngModel)]="landlordPropertyPortfolio.name"
                            name="Name"
                            maxlength="0"
                            maxlength="255"
                            required
                        />
                    </div>
                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        {{ l("Cancel") }}
                    </button>
                    <button
                        type="submit"
                        class="btn btn-primary blue"
                        [disabled]="!landlordPropertyPortfolioForm.form.valid"
                        [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"
                    >
                        <i class="fa fa-save"></i> <span>{{ l("Save") }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<change-reason-modal
    #changeReasonModal
    [dtoModel]="landlordPropertyPortfolio"
    (save)="save()"
    (close)="onChangeReasonModalClose()"
>
</change-reason-modal>

It opens from component where I have tabs

Here is the code of a generic component, where I have tabs

 <div *ngIf="tabTemplates" class="row-fluid align-items-center margin-top-20 w-100">
                <mat-tab-group style="width: 100%;">
                    <mat-tab *ngFor="let tabTemplate of tabTemplates" label="{{ tabTemplate.title }}">
                        <ng-container *ngTemplateOutlet="tabTemplate.template"></ng-container>
                    </mat-tab>
                </mat-tab-group>
                <!-- <tabset class="tab-container tabbable-line">
                    <tab *ngFor="let tabTemplate of tabTemplates" heading="{{ tabTemplate.title }}"
                        customClass="m-tabs__item">
                        <ng-container *ngTemplateOutlet="tabTemplate.template"></ng-container>
                    </tab>
                </tabset> -->
            </div>

I using angular material tabs now, when I was using tabset (commented code), all was okay, now I have this.

I cannot click modal, how I can make it not background?

Answer 1

Not sure if you have figured out the solution yet. I had exactly same issue and I found out that the issue is not about the z-index of modal.

This is caused by the z-index of mat-tab-body-active is 1 which makes the entire content of tab body under the modal backdrop which the z-index = 1040.

I added the following CSS for the component that contains the mat-tab component to override the mat-tab-body-active z-index when the modal is opened like this:

::ng-deep .my-component-wrapper.modalOpened {
    .mat-tab-body-active {
        z-index: auto !important;
    }
}