如何通过单击按钮关闭 jQuery fancybox

Posted 2023-05-08

【中文标题】如何通过单击按钮关闭 jQuery fancybox

【英文标题】：How to close a jQuery fancybox from button click

【发布时间】：2011-05-22 20:59:42

【问题描述】：

我正在使用fancy box 创建一个弹出窗口并使用 iframe 在其上加载另一个页面。这是我的代码

    <script type="text/javascript">
$(document).ready(function() 

    $('.calendar .day').click(function() 
        day_num = $(this).find('.day_num').html();
        day_data = prompt('Enter Stuff', $(this).find('.content').html());
        if (day_data != null) 

            $.ajax(
                url: window.location,
                type: 'POST',
                data: 
                    day: day_num,
                    data: day_data
                ,
                success: function(msg) 
                    location.reload();
                                       
            );
            
        );
    );
$(document).ready(function()
    $("a.iframeFancybox1").fancybox(
    'width'           : 800,
    'height'              : 650,
    'overlayOpacity'     :  '0.4',
    'overlayColor'       :  '#000',
    'hideOnContentClick' :   false,
    'autoScale'          :   false,
    'transitionIn'       :   'elastic',
    'transitionOut'  :   'elastic',
    'type'           :   'iframe'
    );
);

</script>

它成功加载页面并完成工作。但它不是关闭弹出表单，而是在弹出窗口本身加载弹出源表单。我想在工作完成后关闭弹出表单并返回生成弹出窗口的主菜单页面。如何通过单击弹出表单的按钮来实现这一点。

问候，兰加纳

【参考方案1】：

致电$.fancybox.close();

也可以在post查看这个答案

根据http://fancybox.net/faq

如何从其他元素关闭 FancyBox？ ?

只需拨打$.fn.fancybox.close() 你的 onClick 事件

所以你应该可以添加fn。

【讨论】：

我有第 2 版的fancybox，但这没有用……然而，parent.$.fancybox.close();工作！

在我的例子中：“只需在你的 onClick 事件上调用 $.fancybox.close()”

【参考方案2】：

我必须在我的 Drupal 网站上使用 parent.jQuery.fancybox.close() 才能使其正常工作。

【参考方案3】：

你可以使用内联调用

<input type="button" onclick="$.fancybox.close()" value="CloseFB" />

或者你可以使用函数调用

<script>
function closeFB() 
    // Before closing you can do other stuff, like page reloading
    $("#destination_div").load("?v=staff #source_div_with_content"); 
    // After all you can close FB
    $.fancybox.close(); 

</script>

<input type="button" onclick="closeFB()" value="CloseFB" />

onClickevent 中的调用函数

【参考方案4】：

这是一个旧线程，但我想我会分享我的两分钱。

我在使用 onclick 事件关闭fancybox iframe 时遇到了类似的问题，经过多次尝试，这对我有用：window.parent.jQuery.fancybox.close()

这是一个使用输入按钮的示例：

<input type="button" class="formbutton" value="Close" onClick="window.parent.jQuery.fancybox.close();" />

同样，我在锚点 (a) 标记上测试了 onlick，它运行良好。

【参考方案5】：

$.fn.fancybox.close() 不适用于 2.x 版本，实际上它会引发错误。如果您使用的是 2.x 版，请改用 $.fancybox.close(true)。

【参考方案6】：

因为我的关闭按钮有不同的功能：关闭弹窗，关闭fancybox。它需要使用 e.stopPropagation() 来停止冒泡事件；

$('.close-btn').on('click', function(e) 
        e.preventDefault();
        e.stopPropagation();
        $(this).parent().hide();
        $.fancybox.close();
);

【参考方案7】：

简单的解决方案，找到要关闭的链接（它有一个 fancibox-close 类）并在 6 秒（或 6000 毫秒）内完成

setTimeout(function()
    $('.fancybox-close').click();
, 6000);

【参考方案8】：

这对我有用...

    <script type="text/javascript" src="../../js/jquery-ui.js"></script>

    <script src="../../js/fancybox-2.1.5/jquery.fancybox.js" type="text/javascript"></script>
    <script src="../../js/fancybox-2.1.5/jquery.fancybox.pack.js" type="text/javascript"></script>
    <link href="../../js/fancybox-2.1.5/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script lang="javascript">
        var J$ = jQuery.noConflict();
        function SelectAndClose() 
            txtValue = document.getElementById('<%= _browseTextBox.ClientID %>').value;
            window.returnValue = txtValue.value;

            var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
            // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
            var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
            var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
            // At least Safari 3+: "[object HTMLElementConstructor]"
            var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
            var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6


            if (isIE == true) 
                //alert("iexcplorer");
                parent.J$.fancybox.close();
                //document.getElementById("closeFancyInternet").click();//For IExplorer
            
            else 
                //alert("another one");
                document.getElementById("closeFancy").click(); //For Firefox
            
            return false;
        

        function closeBrowsing() 
            document.getElementById("closeFancy").click();
            window.close();
            return false;
        


    </script>

如果你想检查你的浏览器必须看到这个链接：http://jsfiddle.net/9zxvE/383/

【参考方案9】：

使用默认选项data-fancybox-close

<div data-fancybox-close class="btn btn-s btn-small">back</div>

【参考方案10】：

使用fancybox的事件关闭按钮：

document.getElementsByClassName("fancybox-item fancybox-close")[0].click();