当两个模态打开时如何更改ngx引导背景模态答案

【问题标题】：how to change ngx bootstrap backdrop modal when two modals are open当两个模态打开时如何更改ngx引导背景模态
【发布时间】：2021-03-16 02:35:17
【问题描述】：

ngx-bootstrap for angular with bootstrap 4 version 当我们打开一个弹出窗口时，您会看到下面的代码当我们从第一个模式打开另一个弹出窗口（模态）时，背景工作正常，背景不透明度不会反映在第一个弹出窗口。当第二个模态打开时，不透明度不会改变如何更改第一个模态的不透明度（背景）。

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>

【问题讨论】：

我通过创建另一个 bsmodal 并将布尔值应用于元素找到了我自己的解决方案我修复了问题

标签： angular5 bootstrap-modal ngx-bootstrap

【解决方案1】：

我需要显示 2 个重叠的模态，第二个比第一个小，我无法隐藏第一个。我的解决方案是对第二个应用背景颜色：

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

【讨论】：

这其实是一个非常聪明的答案。谢谢你:)
爱它！感谢您提供出色、简单且有效的解决方案！
这不会改变您实际模态的不透明度吗？在 ngx-bootstrap 中，任何数量的模态都只有 1 个背景
@AbhishekAgarwal 没错，在这种情况下，改变的背景是针对第二个模态的。当您关闭它时，背景将恢复为第一个模态。

【解决方案2】：

我找到了一个解决嵌套模式背景问题的 CSS 解决方法。

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

【讨论】：