how to change ngx bootstrap backdrop modal when two modals are open

Question

ngx-bootstrap for angular with bootstrap 4 version you see the below code when we open one popup the backdrop is working fine when we open another popup(modal) from the first modal the backdrop opacity is not reflecting on the first popup. The opacity is not changing how to change the opacity(backdrop) of first modal when second modal is open.

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
  selector: 'demo-modal-service-nested',
  templateUrl: './service-nested.html'
})
export class DemoModalServiceNestedComponent {
  modalRef: BsModalRef;
  modalRef2: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { class: 'modal-lg' });
  }
  openModal2(template: TemplateRef<any>) {
    this.modalRef2 = this.modalService.show(template, { class: 'second' });
  }
  closeFirstModal() {
    this.modalRef.hide();
    this.modalRef = null;
  }
}

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open first modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">First modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a first modal
    <button type="button" class="btn btn-primary" (click)="openModal2(templateNested)">Open second modal</button>
  </div>
</ng-template>

<ng-template #templateNested>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Second modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is nested modal.<br>
    <button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>
  </div>
</ng-template>

I found solution of my own by creating another bsmodal and applying boolean to the element i fixed the issue <bs-modal-backdrop class="modal-backdrop fade in show secondModal-index" *ngIf="secondModalOpen" style="z-index:1051"> </bs-modal-backdrop> — mahesh

Victor Oliveira Victor Oliveira · Accepted Answer · 2019-11-22T13:28:41

I need to show 2 overlapping modals, the second is smaller than the first and I just can't hide the first. My solution was to apply a background-color to the second one:

openModal2(template: TemplateRef<any>) {
    this.modalRef2 = this.modalService.show(template, { class: 'second' });
    document.getElementsByClassName('second')[0].parentElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
}

document.getElementsByClassName('second')[0].parentElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';

how to change ngx bootstrap backdrop modal when two modals are open

2 Answers