如何從對話框代碼中關閉jQuery UI對話框？

我在我的應用程序中使用了幾個jQuery UI對話框來收集用戶和CRUD操作的輸入。當在一個頁面中，我需要一個對話框，我做以下步驟：如何從對話框代碼中關閉jQuery UI對話框？

首先我定義所需的最低標記和代碼來初始化對話框這樣

<div id="dialogPanel" style="display:none" title=""></div>

，當DOM就緒，

$("#dialogPanel").dialog({ 
    autoOpen: false, hide: 'slide', show: 'bounce', resizable: false, 
    position: 'center', stack: true, height: 'auto', width: 'auto', 
    modal: true, overlay: { opacity: 0.5, background: "white" } 
});

然後我在對話框中加載內容時，我需要它使用AJAX調用，這樣

<button id="addCustomer">Add Customer</button>

，這

$("#addCustomer").button().click(function(event) { 
    event.preventDefault(); 
    loadDialog("/Customer/Create", "", "Add New Customer"); 
}); 

function loadDialog(action, id, title) { 
    $("#dialogPanel").dialog("option", "title", title); 
    if (id != "") 
     action = action + "/" + id; 
    $.ajax({ 
     type: "get", 
     dataType: "html", 
     url: action, 
     data: {}, 
     success: function(response) { 
      $("#dialogPanel").html('').html(response).dialog('open'); 
     } 
    }); 
}

Ajax調用返回強類型視圖，將顯示在對話框內甚至dinamically調整其大小。強類型視圖具有一些按鈕，這些按鈕反過來執行其他ajax調用（例如，用於在數據庫上驗證並持久化的控制器操作）。這些調用通常會返回將添加到對話框DIV的HTML代碼。

現在我的問題是：如何關閉對話框？我可以通過點擊對話框右上角的「X」按鈕或者按下ESC鍵來實現，但是我想要這樣做是因爲點擊了強類型視圖中的按鈕。

但是我不希望使用這種代碼

$("#dialogPanel").dialog('close');

不定義本身#dialogPanel DIV一個強類型視圖中。

什麼可能是一個好的解決方案？

來源

2010-10-01 Lorenzo

在主窗體中創建一個closeDialog函數，並在對話框中調用該函數。然後，承載對話的任何其他頁面也需要定義「closeDialog」函數。

另外，您可以傳遞一個指向closeDialog函數的委託來進一步分離事物。

來源

2010-10-01 19:21:36 Clicktricity

我一直在嘗試解決這個問題很長一段時間了。這工作完美。謝謝 – 2011-02-15 20:47:47

如何從對話框代碼中關閉jQuery UI對話框？

回答

相關問題