如何从子窗口关闭fancybox？答案

【问题标题】：How to close fancybox from child window?如何从子窗口关闭fancybox？
【发布时间】：2010-12-08 17:46:02
【问题描述】：

父链接：

<a href="feedback.php" id="feed">Provide your feedback here</a>

启动fancybox的jQuery代码是...

$("#feed").fancybox();

feedback.php 中的代码...

      <html>
        <head>
<script language="javascript">    
$(document).ready(function(){
    $("#feed_submit").click(function(){
    //Name is alerted
    alert($("#name").val());

    //code to close fancy box(Not working)
    $.fancybox.close();

    });
    });
</script>
        </head>
        <body>
        <form method="post" name="feedback" id="feedback" action="">
                <div>
                    <label>name</label>
                    <input type="text" name="name" id="name"/>
                </div>
                <div>
                    <label>feedback</label>
                    <input type="text" name="content" id="content"/>
                </div>
        <div><input type="button" name="feed_submit" id="submit" value="submit"></div>
    </form>    
    </body>
    </html>

单击提交按钮后，我需要使用 jquery 关闭此页面本身的精美框

我尝试过使用

$.fancybox.close();
parent.$.fancybox.close();

但这对我不起作用。如果此 ajax 表单中有任何关闭选项，请告诉我。

【问题讨论】：

你能告诉我们你剩下的代码吗？
@karim79 我认为这就是所有相关代码。
为我工作 $.fancybox.close(); thnx，我正在寻找这个：D

标签： jquery ajax fancybox

【解决方案1】：

以下代码应该工作，并且已经为很多人工作过

parent.$.fn.fancybox.close();

但是，我也看到，例如in this question，jQuery 在 noConflict 模式下运行，用户不知道。如果您遇到这种情况，则必须将脚本修改为

parent.jQuery.fn.fancybox.close();

如果这些都不起作用，请使用像 Firefox 的 Firebug 或 Chrome 的开发者控制台等工具，查看是否有错误消息，并向我们报告是什么。

【讨论】：

【解决方案2】：

试试

window.parent.$.fancybox.close();

假设 $.fancybox.close(); 在父窗口中工作。

【讨论】：

fancybox 会打开一个 DIV 元素，而不是实际的弹出窗口，因此不会有 window.opener。
@David 当您自己在回答中使用window.parent 时，您如何发表此评论？你做了类似的事情，仍然认为在这种情况下，fancybox 打开一个 div 而不是另一个窗口（iframe）？
它打开一个带有 iframe 的 div。 iframe 没有window.opener。
@David 我测试过，但似乎没有......我本来希望 iframe 的行为就像弹出窗口一样。对不起。我很惊讶你说它打开了一个 DIV。我以为你的印象是它总是使用 AJAX。
好吧，我想我们误会了，我只想说window.opener 不起作用，因为只有弹出窗口有开启器。其他任何东西都不是以同样的方式打开。它是否类似于设计中的弹出窗口是 iframe 不知道的。 noConflict 的问题在于，它经常在 WordPress 之类的地方使用，而开发人员不知道它，并进行了包装，因此 $ 仍然可以使用； (function($) { $.fancybox.close(); /* this will work */ })(jQuery);

【解决方案3】：

试试：

$("#fancybox-close").trigger('click');

【讨论】：

这很有帮助

【解决方案4】：

当您使用type: iframe 的fancybox 时，您必须在iframe 框中插入所有库，如jquery 等。然后关闭iframe 花式框只需使用parent.$.fancybox.close()

记住“iframe”类型的fancybox在新窗口中打开，其他类型的fancybox在同一窗口中打开。

【讨论】：

【解决方案5】：

面临同样的问题，这是我能找到的唯一解决方案：

代码本身是：

parent.jQuery.fancybox.close();

它在这样的函数中运行：

jQuery("#cancelId").click(function(){
    parent.jQuery.fancybox.close();
});

希望对你有帮助，娜奥雷

【讨论】：

【解决方案6】：

$.fn.fancybox.close();

这行得通吗？

【讨论】：

【解决方案7】：

//在子窗口或者iframe上放这个函数：

function closeIframe(){ parent.closeIframeMain(); }

//和这个链接关闭这个窗口

<a onclick="closeIframe();" href="#">Close window</a>

//然后在父窗口上放这个函数：

function closeIframeMain(){ jQuery("#fancybox-close").trigger("click"); }

【讨论】：

【解决方案8】：

它肯定会起作用，只需复制并粘贴它：

<a href="javascript:;" onclick="jQuery('.fancybox-close').fancybox().trigger('click');">Close from Inside</a>

实际上，如果 fancybox 本身，它会触发关闭按钮，这在大多数情况下都有效。

享受编程的乐趣:)

【讨论】：

【解决方案9】：

我遇到了同样的问题，但使用的是 ASP.NET。

基本上，在一个页面上，我打开一个页面（里面有一个表单控件），如下所示：

$.fancybox({
                href: '/ContactUs.aspx',
                type: 'iframe',
                padding: 60,
                width: 465,
                height: 670,
                maxWidth: 465,
                maxHeight: 670,
            });

当我在 FancyBox 上单击关闭时，它可以工作，但如果我先提交然后关闭它，fancyBox 将不会关闭，即使页面在同一个域中。

最后我发现你必须在打开 FancyBox 时设置 autoSize:false：

 $.fancybox({
                href: '/ContactUs.aspx',
                type: 'iframe',
                padding: 60,
                width: 465,
                height: 670,
                maxWidth: 465,
                maxHeight: 670,
                autoSize: false
            });

它现在应该可以工作了。如果这对其他人有用，请回复。干杯。

会

【讨论】：

【解决方案10】：

parent.jQuery.fancybox.close(); 与.$。 - 在 IE8 中崩溃。有了这个 - 一切都好。

【讨论】：

顺便说一句，我添加了 try() 块和这个（结束幻想）的一些符号，我在这里找到。它开始在 IE/FF 中工作。：