关闭特定 bootstrap 模式

Question

我在 Angular 8/Typescript 中使用多个模态框。
第一个模式打开并显示信息。第二个模式打开并允许您做一些工作。然后显示另一个带有我订阅的@Output 的确认模式（yes/no）。

如果答案是肯定的，我想关闭确认模式，这很简单，但我无法同时关闭第二个模式。

模态 1 打开第二个模态...

config = {
   animated: true,
   keyboard: true,
   backdrop: true,
   ignoreBackdropClick: true,
   class: 'modal-dialog-centered'
};
openSecondModal() {    
this.bsModalRef = this.myBsModalService.show(SecondModalComponent, this.config);
}

第三个确认模式...

  const initialState = {
     message: 'Yes/No modal',
     title: '3rd Modal',
     iconType: 'success',
     modalSize: 'modalSmall'
     };
          this.thirdModalRef = this.modalService.show(FeedbackModalComponent, { initialState });
          this.thirdModalRef.content.buttonClick.subscribe((feedbackData) => {
            if (feedbackData != null) {
             ****************************************
               CLOSE SECOND MODAL HERE
             ****************************************
            }
          });

我已经尝试了几件事，但似乎没有任何东西可以隐藏第二个模态...它似乎让它挂起，所以我根本无法关闭它。

非常感谢任何帮助！！

Answer 1

试试这个。在html.

中添加id关闭模态按钮

<button id="closeModal1" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

然后在ts端使用这段代码。

document.getElementById("closeModal1").click();

当它关闭模式时。如果你想隐藏关闭按钮，请在 html 中使用它而不是第一个。

 <button id="closeModal1" [hidden]="true" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

您可以使用不同的 id 关闭任何模式。

Answer 2

有些名称冲突，这解决了问题...

const initialState = {
 message: 'Yes/No modal',
 title: '3rd Modal',
 iconType: 'success',
 modalSize: 'modalSmall'
 };
      this.thirdModalRef = this.modalService.show(FeedbackModalComponent, { 
      initialState });
      this.thirdModalRef.content.buttonClick.subscribe((feedbackData) => {
        if (feedbackData != null) {
              
              this.thirdModalRef.hide();
        }
      });

关闭特定 bootstrap 模式

Close specific bootstrap modal

typescript

bootstrap-modal

angular

angular8