Question

我在iframe中打开了一个颜色框窗口。在该窗口中，我有一个用户可以点击的链接，理想情况下我希望关闭当前的颜色框窗口并打开一个新的颜色框窗口（再次在iframe中）或将新内容加载到现有的iframe中。

我的第一个窗口就像这样打开：

$.colorbox({ width: "800px", height: "580px", open: true, iframe: true, href: '/App/View?id=' + id });

当我点击第一个窗口中的链接时，这就是被解雇的内容：

$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId })

我试图用以下方法关闭第一个窗口：

parent.$.colorbox.close();

但最终会关闭两个窗口。

如果我没有尝试关闭第二个窗口，则会在第一个窗口的内容中打开，我有2个边框，2个关闭按钮等。

有什么想法吗？

感谢。

Answer 1

尝试执行此操作，关闭第一个颜色框，然后打开包含父上下文的新颜色框。

parent.$.colorbox.close(); 
parent.$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });

实际上你应该在父页面中有一个函数来执行此操作。

function OpenNote(noteId){
   $.colorbox.close(); 
   $.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
}

然后单击View页面内的链接调用此函数，传递noteId。

parent.OpenNote(id);

Answer 2

我在关闭colorbox时使用递归函数打开另一个颜色框。我的函数是：

<script type="text/javascript">
    var colorList = [];
                    colorList.push('1. Popup Content');
                    colorList.push('2. Popup Content');
                    colorList.push('3. Popup Content');
                    colorList.push('4. Popup Content');
            colorboxRecursive(colorList);
    function colorboxRecursive(colorList){
        if (colorList.length>0) {
            $.colorbox({
                html:colorList.pop(),
                onClosed:function(){
                    if (colorList.length>0)
                        colorboxRecursive(colorList);
                }
            });
        }else{
            return false;
        }
    }
</script>

使用iframe的Colorbox - 关闭然后打开另一个

2 个答案: