如何使用jquery-ui在另一个框架中弹出一个对话框

Question

我使用jquery-ui-1.8创建了一个具有框架集和三个框架的小型网页。

<frameset id="mainFrame"cols="25%,*,25%"> 
    <frame id="f1" src="test.php"></frame> 
    <frame id="f2" src="test2.php"/> 
    <frame /> 
</frameset> 

然后我添加了一个按钮test.php的，其在第一帧（F1）和一个div到test2.php其在第二框架加载加载文件。

<div id="testdiv"> this is test 2</div> 

然后我需要弹出从“testdiv”一个jquery对话框第二帧（F2）上，当我点击在f1上按钮。

我尝试了以下解决方案给这些线程。 [1] - Display jquery dialog in parent window

var $jParent = window.parent.jQuery.noConflict(); 
var dlg1 = $jParent('#testdiv'); 
dlg1.dialog(); 

和 [2] - jQuery UI dialog display inside frame, from bookmarklet?

var frame = window.frames[1]; 
var div = $(frame.document.getElementById("testdiv")); 
div.html("My popup contents"); 
div.dialog(); 

但这些弹出窗口在第二帧中的对话框的非。有人可以帮我解决这个问题。

Answer 1

只是测试这种方式，也许这不是最好的方式，但你可以尝试它。 （注意：不要忘了添加属性 - >名称= “F2” < - 在IFRAME F2）

在test.php的：

<button onclick="parent.f2.$('#testdiv').dialog('open');">test</button> 

---

在test2.php：

<link type="text/css" href="jquery-ui.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#testdiv").dialog({ 
    autoOpen: false 
    }); 
}); 
</script> 

<div id="testdiv"> hello world! </div>