單擊模態iframe關閉對話框？

我正在創建一個模態對話框。首先，我將一個iframe附加到body標籤上以充當我的覆蓋層。單擊模態iframe關閉對話框？

<div class="modal-screen"> 
    <iframe src="javascript:false;"></iframe> 
</div>

然後我將我的對話框追加到body。

<div class="dialog"> 
    <!-- various dialog related elements 
</div>

現在我想在用戶單擊覆蓋圖時關閉對話框。問題是，我似乎無法綁定到與覆蓋有關的任何事件。

要總結一下我的JS，基本上我的對話視圖有一個initialize方法，其中準備覆蓋：

initialize: function() { 
    this.modal = $('<div class="modal-screen"><iframe src="javascript:false;"></iframe></div>') 

    this.modal.on('click', function(e) { 
    // this event never seems to fire 
    console.log("hello"); 
    } 
}

然後我渲染到頁面時，我需要它。當我點擊疊加，我從來沒有看到hello ..

render: function() { 
    $('body').append(this.modal); 
    // append other dialog content 
    this 
}

來源

2012-04-13 David Tuite

這裏沒有理由使用iframe。只需構建一個overlay div，然後在單擊它時將其刪除。

來源

2012-04-13 13:27:36 jbabey

我已閱讀[使用漸進式增強設計]（http://filamentgroup.com/dwpe/），最好使用iframe。然而，你建議的解決方案似乎工作得很好，所以我會繼續努力，直到我有一個更好的理由不去做。 – 2012-04-17 01:56:13

this.modal不是一個單一的元素，取而代之的則是一個DOM對象這就是爲什麼你不能綁定就可以了什麼。嘗試綁定$（'。modal-screen'，this.modal）。

來源

2012-04-13 13:16:15 GillesC

綁定到'this.modal.find（'。modal-screen'）'應該和你說的一樣，對嗎？我似乎無法在「this.modal」中找到除「iframe」之外的任何內容。記錄'this.modal.find（'*'）'給了我iframe元素。我似乎無法將一個事件綁定到它，我似乎無法抓住它中的任何元素。 – 2012-04-13 13:27:07

單擊模態iframe關閉對話框？

回答

相關問題