CODEWITHSUNDEEP
angular5bootstrap-modalngx-bootstrap
mahesh
mahesh

Reputation: 351

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

enter image description herengx-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>

Upvotes: 5

Views: 6195

Answers (2)

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

I have found a CSS workround for nested modal backdrop issue.

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

enter image description here

Upvotes: 4

Victor Oliveira
Victor Oliveira

Reputation: 583

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)';

Upvotes: 4

Related Questions