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; 
      }); 
    }); 
});