禁用引導模式區域外的單擊事件以關閉 angular 4 模式

Question

我是anguar4的新手。 我在我的項目中使用引導模式。 當在模態之外單擊時，模態將隱藏。 這是我的代碼

//在html中

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

// 在 ts 代碼中

@ViewChild('noticeModal') public noticeModal: ModalDirective;

ngAfterViewInit() {
   this.noticeModal.show();
};

Answer 1

請在 html 中添加此配置。 希望它能幫助您解決問題。

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    [config]="{backdrop: 'static',  keyboard: false}" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

Answer 2

下面的解決方案通過添加{backdrop: 'static', keyboard: false}；當調用模態時 --> $('#myModal').modal({backdrop: 'static', keyboard: false})；

它對我bsModal ，無需將bsModal添加到<div>或任何指令模塊中。

更清晰的解決方案如下圖： HTML：

 <div #crudModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">        
      </div>
      <div class="modal-footer">       
      </div>
    </div>
  </div>
</div>

在 .ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('crudModal') crudModal: ElementRef;

openModal() {
    $(this.crudModal.nativeElement).modal({backdrop: 'static', keyboard: false});
}

希望能幫助到你。

Answer 3

順便說一句，如果您將通過BsModalService為 bsModal 使用組件方法，您可以簡單地設置： ignoreBackdropClick = false （忽略背景點擊），如Angular Bootstrap API 參考中所述

你的.component.ts

constructor(private bsModalService: BsModalService) {}

const bsModal = this.bsModalService.show(YourModalComponent, {
    class: 'modal-dialog-centered modal-md',
    ignoreBackdropClick: true
});

PS 最好使用這種方法而不是在 HTML 模板中使用。 考慮可重用性;)

Answer 4

如果您使用按鈕打開彈出窗口，請在按鈕上使用以下配置，

<button data-target="#myModal" data-toggle="modal" 
data-backdrop="static" 
data-keyboard="false">

Answer 5

使用backdrop: 'static'選項，在列出的文檔中這里