如何使用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>