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

【问题标题】：Modal Popup do not close if i click anywhere on screen如果我单击屏幕上的任何位置，模态弹出窗口不会关闭
【发布时间】：2019-07-14 04:26:39
【问题描述】：

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

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

【问题讨论】：

标签： html typescript angular5

【解决方案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';
  }
}

【讨论】：

这样做我无法打开模式弹出窗口。 @HostListener('click', ['$event.target']) onClick(btn) { if(this.settingsDisplay === 'block'){ this.settingsDisplay = 'none'; } }
我想我需要验证一些其他条件，请您从上面的代码中指导我。 @distante
你为什么用$event.target ??

【解决方案2】：

也许这有帮助，它是用 vanilla 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 属性。

【讨论】：

在 Angular 中这不是一个好方法，因为你可能会自己造成内存泄漏。