打开两个模态时如何更改ngx引导程序背景模态

Question

ngx-bootstrap用于带有bootstrap 4版本的Angular，当您打开一个弹出窗口时，您会看到以下代码，当我们从第一个模式中打开另一个弹出窗口（模式）时，背景工作正常，背景不透明性无法反映在第一个弹出窗口上。打开第二个模式时，不透明度不会改变如何更改第一个模式的不透明度（背景）。

(* n ≥ 3, 2n + 1 < 2^n *)
Theorem two_n_plus_one_leq_three_lt_wo_pow_n : forall n:nat,
    (blt_nat (two_n_plus_one n) (exp 2 n)) = true
       -> (bge_nat n 3) = true.
Proof.
  intros n.
  destruct n.
  (* n = 0 *)
  compute.
  intros HF. (* Discard the cases where n is not >= 3 *)
  inversion HF.

  destruct n.
  (* n = 1 *)
  compute.
  intros HF.
  inversion HF.

  destruct n.
  (* n = 2 *)
  compute.
  intros HF.
  inversion HF.

  induction n as [ | k IHk].
  (* n = 3 *)
  - compute.
    reflexivity.
  (* n+1 inductive step *)
  - generalize dependent k.
    intros.
    compute.
    reflexivity.
Qed.

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;
  }
}

Answer 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）';

Answer 2

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

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