當onclick函數不在按鈕中時，ng2引導模式無法關閉

我試圖實現一個包含項目列表的頁面。通過點擊每個項目，將會觸發一個ng2-bootstrap模式來顯示有關該項目的詳細信息。但是當我嘗試在按鈕外部使用（click）=「lgModal.show（）」時，我發現了一個問題。無論是通過點擊疊加層之外還是點擊小x（交叉）按鈕都無法關閉模態。關閉模式的唯一方法是按'Escape'鍵。下面是代碼示例：當onclick函數不在按鈕中時，ng2引導模式無法關閉

<li (click)="lgModal.show()" *ngFor="let item of Items"> {{ item }} 
    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title">Large modal</h4> 
       </div> 
       <div class="modal-body"> 
        ... 
       </div> 
      </div> 
     </div> 
    </div> 
</li>

有沒有一種方法，我可以逃脫這個按鈕並移動（的onclick）按鈕之外。大模

來源

2017-01-09 NewJake

您需要添加data-dismiss屬性

更換

<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button>\

與

<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close" data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span> 
        </button>

來源

2017-01-09 16:43:58

它並沒有爲我工作......仍然無法關閉模式。 – NewJake

你能爲此做一個plunkr或jsfiddle嗎？ –

當onclick函數不在按鈕中時，ng2引導模式無法關閉

回答

相關問題