Question

 <div class="modal fade in" id="acc-del-form" role="dialog" style="background: rgba(0, 0, 0, 0.55);" [ngStyle]="{'display':display}" data-keyboard="false" data-backdrop="false">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header" style="background: #05668D; color:#fff">
            <button type="button" class="close" data-dismiss="modal" (click)="onCloseDeleteTagging()">×</button>
            <h4 class="modal-title">Update!</h4>
          </div>
          <div class="modal-body">
            <h5>Do you want to update tags</h5>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-info btn-fill btn-sm" data-dismiss="modal" (click)="updateTaggingData()">Yes</button>
            <button type="button" class="btn btn-default btn-warning btn-fill btn-sm" data-dismiss="modal" (click)="onCloseDeleteTagging()">No</button>
          </div>
        </div>
      </div>
    </div>

这是我上面的模式弹出窗口，当我单击 onCloseDeleteTagging（）方法

时，它将关闭

onCloseDeleteTagging() {
    this.display = 'none';
  }

我想关闭模式弹出窗口，以便在我单击屏幕上的任意位置而不是单击“ X”按钮时关闭

  <div class="pull-right" style="padding-top:15px;" [ngStyle]="{'display':TaggingUserDisplay}">

    <button type="button" title= "Save Tags" class="btn btn-warning btn-fill btn-xs" id="save_btn" (click)= "updateTaggingDataPopup()" [ngStyle]="{'display': 'updateTagBoList.length !== 0 '}"><i class="fa fa-save"></i></button>
  </div>

这是我的代码，用于打开模式弹出窗口

  updateTaggingDataPopup() {
    this.display = "block";
  }

当我单击屏幕上的任意位置时，有谁能帮助我关闭弹出窗口。

Answer 1

您需要使用@HostListener（HostListener Docs）

@HostListener('document:click', ['$event'])
clickOnDocument(event) {
  if(SOME_TEST_DO_YOU_WANT_TO_MAKE_PROBABLY_WITH_THE_event_TARGET){
     this.display = 'none';
  }
}

Answer 2

也许有用，它是用香草JS制成的。

document.addEventListener('click', (evt) => {
    target = evt.target;
    var modalContainer = document.getElementById('acc-del-form');
    var modal = document.getElementById('modal_block');
    if (target !== modal) {
        modalContainer.style.display = "none"
    }
})

在模式模块外的任何位置单击时，将删除display属性。

如果我在屏幕上的任何位置单击，模态弹出窗口不会关闭

2 个答案: