如果用戶點擊彈出一側，Angular4彈出即將關閉？

Question

我跟着angular4本教程彈出模式：

http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

如果我點擊的模式之外，模態消失。但是我不希望模式消失，直到用戶單擊關閉圖標。

這裏是模態的OnInit：

ngOnInit(): void { 
     let modal = this; 

     // ensure id attribute exists 
     if (!this.id) { 
      console.error('modal must have an id'); 
      return; 
     } 

     // move element to bottom of page (just before </body>) so it can be displayed above everything else 
     this.element.appendTo('body'); 

     // close modal on background click 
     this.element.on('click', function (e: any) { 
      var target = $(e.target); 
      if (!target.closest('.modal-body').length) { 
       modal.close(); 
      } 
     }); 

     // add self (this modal instance) to the modal service so it's accessible from controllers 
     this.modalService.add(this); 
    } 

這裏是我有什麼實際的plunker： https://plnkr.co/edit/gPCTvV?p=preview

Answer 1

剛從app/_directives/modal.component.ts

// close modal on background click 
    this.element.on('click', function (e: any) { 
     var target = $(e.target); 
     if (!target.closest('.modal-body').length) { 
      modal.close(); 
     } 
    }); 

更新Plunker LINK

刪除此

更新

您可以利用材料對話或利用引導模態。

對於材質對話現場實例檢查此工作link並點擊聯繫人。你

還可以檢查此angular materail link

你的目的，你不希望外界點擊時，看看這個plunker被關閉的模式。

使用引導模式檢查這個answer它有一個工作演示過