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

时间:2011-05-11 16:58:15

标签: jquery dialog jquery-ui-dialog

我正在使用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>

然后当我点击f1中的按钮时,我需要在第二帧(f2)上从“testdiv”弹出一个jquery对话框。

我尝试了以下线程给出的解决方案。 [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();

但是没有这些弹出第二帧内的对话框。有人可以帮我解决这个问题。

1 个答案:

答案 0 :(得分:4)

只是为这种方式进行测试,也许这不是最好的方法,但你可以尝试一下。 (注意:不要忘记添加属性 - &gt; name =“f2”&lt; - on 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>