2015-04-26 58 views
1

我的許多頁面都有對話框,當點擊背景(或疊加層)時(即當您在對話框外單擊時)應該關閉對話框。我正在用此代碼做這件事對話框不會關閉背景/疊加點擊

$(document).on('click', '.ui-widget-overlay', function(){ 
    $(".ui-dialog-titlebar-close").trigger('click'); 
}); 

它來自jQuery-UI close modal dialog on background click

上面的代碼是在母版頁上,並且它對我嘗試過的每個對話框都能正常工作,除了一個之外。通過調用頁面上控件onclick事件的以下函數(或類似的東西)可以打開正確關閉的頁面(即單擊背景時)。

function LoadPopupWindowFixedWidthAndModal(path, width) { 
    $("#DivPopup").dialog({ title: "Tip", width: width }).load(path); 
} 

不收是放置在母版頁上的用戶控件內,並使用此代碼

$(function() { 
    $("#divFindResult").dialog({ 
     autoOpen: false, 
     modal: false, 
     resizable: false, 
     width: 600, 
     position: { my: "right top", at: "right bottom+6px", of: "#FindPopupPos" }, 
     open: function (type, data) { $(this).parent().appendTo("form:first"); } 
    }); 
}); 

這個對話框有一個查找盒和相關製作成對話的對話實際上是通過點擊查找框中,使用此代碼

<asp:TextBox runat="server" ID="TextFind" Width="100" style="position:relative; z-index:100;" onclick="$('#divFindResult').dialog('open'); this.focus();" /> 

當我點擊查找框中正確的對話框出現時打開,但只能通過點擊它自己的關閉按鈕關閉。點擊背景不起作用。但是,一旦打開此對話框,我可以打開其他對話框之一,然後單擊背景並將它們關閉。

有些事情我已經嘗試:

  1. 加入「開放:功能(類型,數據){$(本).parent()appendTo( 「形式:一是」); }',因爲該對話框在表單之外。這個想法來自這裏:http://www.worldwidewhat.net/2011/06/fixing-asp-net-control-events-in-jquery-ui-dialog
  2. keep jqueryui overlay in same DOM position
  3. jquery UI Modal Dialog in asp.net usercontrol: Modal Overlay only on Div in UserControl
  4. 我讀jQuery UI - Close Dialog When Clicked Outside,但決定它不會幫助。
  5. 還審查了一些其他文章。

我不明白這兩種情況之間有什麼區別是相關的,儘管我已經通過測試不同代碼的調整而拒絕了一些理論。

「不會關閉」的一個區別是對話框的內容由服務器端代碼填充。這可能是相關的,但目前我不知道如何。

另一個區別是正在從文本框中打開事件。我再次看不到這是相關的,這是一個重要的特徵,對我們很好。 (所有這些都是因爲我將舊的AjaxToolKit代碼轉換爲jQuery,所以我們可以保持一致。更改行爲並不總是一種選擇。)

另一個區別在於在用戶控件內部和在母版頁。這很重要嗎?

它也有一些不同的參數,不使用load()函數,並且如果這是正確的單詞,則通過對其「創建」的單獨調用打開它。正如你所看到的,我正在抓秸稈。

有人可以告訴正確的秸稈或樹枝或樹幹,我將不勝感激。先謝謝你。Jim

回答

2

.ui-widget-overlay上的點擊事件將不起作用因爲DOM中沒有.ui-widget-overlay

這是因爲您已指定modal: false.ui-widget-overlay只有當modal: true才起作用。也就是說,覆蓋div用於模態對話框。

+0

修復它。非常感謝!看起來那些工作的人採用了默認模式:false。我將不得不看看那個,我會發現他們實際上有模態:真。 –

0

可能有2個重疊 - 檢查打開非工作對話框時出現的重疊的類。

打開另一個工作對話框,將頂部帶有.ui-widget-overlay的疊加層打開,點擊觸發兩個閉合。