Модальное всплывающее окно не закрывается, если я нажимаю в любом месте экрана

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

Может быть, это поможет, это сделано с ванильным 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.

Answer 2

Вам необходимо использовать @HostListener ( Документы HostListener )

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