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

Question

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

它成功加载了页面并完成了所需的工作。但是，它没有关闭弹出表单，而是在弹出表单中加载了弹出源代码表单。我想在完成工作后关闭弹出表单，并从生成弹出表单的主菜单页面返回。如何在弹出表单上的按钮单击事件中实现这一点。

问候，Rangana

- Rangana Sampath

Answer 1

调用 $.fancybox.close();

还可以在这篇答案中查看。

根据http://fancybox.net/faq

4. 如何从其他元素关闭FancyBox？

只需在您的onClick事件中调用$.fn.fancybox.close()即可。

所以你只需要添加fn.

- Haim Evgi

---

我有fancybox的第二个版本，但它不起作用......不过，parent.$.fancybox.close();有效！ - Theo Orphanos

在我的情况下，只需在您的onClick事件中调用$.fancybox.close()即可。 - apet

Answer 2

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

- Neil

Answer 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中调用函数

- Alex

Answer 4

这是一个旧的帖子，但我想分享我的看法。

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

以下是使用输入按钮的示例：

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

另外，我测试了在锚点（a）标签上的onclick事件，它运行良好。

- Jaz

Answer 5

$.fn.fancybox.close()在2.x版本中不起作用，事实上会引发错误。如果您正在使用2.x版本，请尝试使用$.fancybox.close(true)。

- silvenon

Answer 6

由于我的关闭按钮有不同的功能：关闭弹出窗口和关闭fancybox。需要使用e.stopPropagation()来停止事件冒泡；

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

- Vladimir Kuzmin

Answer 7

简单的解决方案是找到关闭链接（它有一个名为fancibox-close的类）并在6秒内（或6000毫秒）执行关闭操作。

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

- user1817927

Answer 8

使用默认选项 data-fancybox-close

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

- Anton Ipatov

Answer 9

这对我有效...

    <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/

- Yemmill

Answer 10

使用fancybox的关闭按钮事件：

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

- Juan Carlos Lechuga