jquery – iframe上的Fancybox.close()

我正在使用最新的fancybox(2.0.4),我为iframe创建了一个 fancybox.内容显示正确.我在我的html中添加一个“关闭”按钮,该按钮在iframe中显示.我希望关闭按钮与点击fancybox右上角的“x”具有相同的结果.我熟悉 FancyBox iframe returns parent.$as undefined (using WordPress),我的父亲是一个没有任何内容的DOM对象.也试过了

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

任何帮助？

更新：

a.js(链接到a.html)

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,maxHeight   : 600,fitToView   : false,width       : '70%',height      : '70%',autoSize    : false,closeClick  : false,type        : 'iframe',openEffect  : 'none',closeEffect : 'none',afterClose  : function() { 
            window.location.reload();
        }
    });
});

a.html

<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>

我怎么能在new.html中有一个关闭 fancybox iframe窗口的按钮

更新：一个完整的HTML文件

a.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox({
                    maxWidth    : 800,afterClose  : function() { 
                        window.location.reload();
                    }
                });
            });
        </script>
    </head>

    <body>
        <a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>


    </body>
</html>

b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
    </head>

    <body>
        <input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
    </body>
</html>

解决方法

您的手动关闭按钮应如下所示：

<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>

更新：您应该使用< form>上的onsubmit标签,而不是按钮图像所以在你的“new.html”设置类似的东西

<form id="login_form" action="process.PHP" onsubmit="javascript:parent.jQuery.fancybox.close();">

更新#2：见working demo page

更新#3：我已经决定删除我对这个答案的所有额外评论,因为讨论变得太长并且无处可去.我让代码和工作演示的链接,如果这可以帮助其他人.

jquery – iframe上的Fancybox.close()

解决方法

相关文章