如何使用jquery ui對話框加載頁面

Question

是否可以使用jquery ui對話框加載另一個頁面？

像對話框+阿賈克斯

感謝

Answer 1

如果你想內容加載到使用Ajax一個對話框，你可以很容易地使用$ .load：

// initialize dialog 
var dialog1 = $("#dialog").dialog({ autoOpen: false, 
    height: 600, 
    width: 350 
}); 

// load content and open dialog 
dialog1.load('path/to/otherPage').dialog('open'); 

檢查爲例here。

Answer 2

當然，只是在您的對話框的HTML iframe中。

Answer 3

如果你特別需要或想要的iframe，而不是注入內容到DOM，我對這裏的延伸：http://plugins.jquery.com/project/jquery-framedialog

Answer 4

的JQuery用戶界面對話框的設計是這樣的，它需要現有的內容時操作。通常在示例中，這是取自DOM的現有BODY的DIV。

有些情況下，爲現有頁面添加標記只是爲了創建對話框 - 特別是如果內容由AJAX加載 - 會導致問題。例如，您可能有一個JavaScript庫，可能會從多個頁面中調用，並且不希望爲每個頁面添加標記。

的另一種方式（inspired by this）是在這裏：

的區別是你創建DIV編程（將被自動添加到DOM） - 並在對話框關閉時，我們完全摧毀它 - 從刪除'close'事件中的DOM。

function JQDialog(title, contentUrl, params) { 
    var dialog1 = $("<div>").dialog(
    { 
    autoOpen: false, 
    modal: true, 
    title: title, 
    close: function (e, ui) { $(this).remove(); }, 
    buttons: { "Ok": function() { $(this).dialog("close"); } } 
    }); 
    dialog1.load(contentUrl).dialog('open'); 
} 

---

更換dialog1.load(contentUrl).dialog('open');與以下，如果你不希望對話框打開（和潛在閃爍），直到內容被加載。這也將允許它在沒有額外工作的情況下正確居中。

dialog1.load(contentUrl, function() { 
    $(this).dialog('open'); 
}); 

Answer 5

我寧願等到我有內容創建對話框。這對我來說似乎更直接。此外，自動調整大小似乎沒有其他的工作：

$.ajax({ 
     'url': contentUrl, 
     'success': function success(data, textStatus, xhr) { 
      $("<div>" + data + "</div>").dialog({ 
       "width": "auto", 
       "height": "auto", 
       "close": function (e, ui) { $(this).remove(); } 
      }); 
     } 
    });