jQuery的對話框中打開另一個頁面

Question

有一個頁面transaction.html

如何在另一個頁面彈出打開這個頁面說show_transactions.html在一個jQuery對話框

 $dialog.html() //open transaction.html in this dialog 
    .dialog({ 
     autoOpen: true, 
     position: 'center' , 
     title: 'EDIT', 
     draggable: false, 
     width : 300, 
     height : 40, 
     resizable : false, 
     modal : true, 
    }); 
    alert('here'); 
    $dialog.dialog('open'); 

此代碼是目前在show_transactions.html

謝謝..

Answer 1

您可以使用jQuery的​​方法將頁面加載到一個對話框，在這裏是如何：

$("#dialog").dialog({ 
    autoOpen: false, 
    position: 'center' , 
    title: 'EDIT', 
    draggable: false, 
    width : 300, 
    height : 40, 
    resizable : false, 
    modal : true, 
}); 

$("#dialog_trigger").click(function() { 
    $("#dialog").load('path/to/file.html', function() { 
     $("#dialog").dialog("open"); 
    }); 
}) 

這裏假設對話框的ID爲'dialog'，另外還有另一個ID爲'dialog_trigger'的元素被點擊打開它。您將這兩個文件放入文檔的ready函數中，以便在頁面加載時進行對話（如果不是），則會在用戶製作時爲用戶造成輕微但明顯的延遲。

Answer 2

你也可以這樣做......

創建對話框頁面

<div id="MyDialogID" title="My Dialog Title"></div> 

創建鏈接（當我們點擊該鏈接，就會打開對話框）

<a id="MyLinkToDialogID" href="Path to Dialog Page">Open My Dialog</a> 

初始化對話框（創建一個n事件之間的鏈接和對話框）

$('#MyLinkToDialogID').each(function() { 
    var $link = $(this); 

    $.post($link.attr('href'), function (data) { 
     var $dialog = $(data) 
      .filter('#MyDialogID') 
      .dialog({ 
       autoOpen: false, 
       resizable: false, 
       height: 240, 
       width: 370, 
       modal: true 
      }); 

      $link.click(function() { 
       $dialog.dialog("open"); 
       $dialog.css("height", "240"); 
       $dialog.css("width", "370px"); 
       $dialog.dialog({ position: 'center' }); 

       return false; 
      }); 
    }); 
});