如何从按钮单击关闭jQuery fancybox

I'm using fancy box to create a popup and load another page on it using an iframe. here is my code

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

It loads the page successfully and does the stuff. But instead of closing the popup form, it loads the popup source form inside the popup itself. I want to close the popup form when the work is done and return to the main menu page from which the popup was generated. How do I achieve this on a button click of the popup form.

它成功加载页面并完成任务。但是它并没有关闭弹出窗口窗体，而是在弹出窗口本身中加载弹出源窗体。当工作完成后，我想关闭弹出窗口，返回弹出窗口的主菜单页面。如何在弹出表单的按钮单击中实现这一点。

Regards, Rangana

问候,Rangana

9 个解决方案

#1

call to $.fancybox.close();

调用.fancybox.close美元();

also look on this answers in the post

你也可以看看这个帖子里的答案

According to http://fancybox.net/faq

据http://fancybox.net/faq

How can I close FancyBox from other element? ?

如何从其他元素中关闭FancyBox ?吗?

Just call $.fn.fancybox.close() on your onClick event

只需调用$.fn.fancybox.close()即可

So you should just be able to add in the fn.

所以你应该能够加入fn。

#2

I had to use parent.jQuery.fancybox.close() with my Drupal site to get this to work properly.

我必须使用parent.jQuery.fancybox.close()和我的Drupal站点来使其正常工作。

#3

You can use inline call

可以使用内联调用

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

Or either you can use function called

或者你可以使用函数call

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

Call function in onClickevent

调用函数onClickevent

#4

This is an old thread but I thought I'd share my two cents.

这是一条旧线，但我想我要分享我的两分钱。

I was having similar issues with closing the fancybox iframe using the onclick event and after many tries, this did the trick for me: window.parent.jQuery.fancybox.close()

我在关闭fancybox iframe时遇到了类似的问题，使用onclick事件，在多次尝试之后，这就给了我一个窍门:window。parent.jquery.fancybox.close ()

Here's an example using an input button:

下面是一个使用输入按钮的例子:

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

As well, I tested the onlick on an anchor (a) tag and it worked fine.

同样，我在一个锚(a)标签上测试了onlick，它工作得很好。

#5

$.fn.fancybox.close() doesn't work for version 2.x, in fact, it raises an error. If you're using version 2.x, try $.fancybox.close(true) instead.

$.fn.fancybox.close()对版本2不起作用。实际上，它会引发一个错误。如果您使用的是版本2。x,尝试.fancybox.close美元(真正的)。

#6

Because of my close button has different functions: close popup, and close fancybox. It needs to use e.stopPropagation() to stop bubbling event;

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

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

#7

SIMPLE solution, find link to close (it have a class fancibox-close) and do it in 6 seconds (or 6000 miliseconds)

简单的解决方案，找到要关闭的链接(它有一个类幻想框关闭)，并在6秒(或6000毫秒)内完成

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

#8

This works for me...

这适合我…

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

If you want to check your browser must see this link: http://jsfiddle.net/9zxvE/383/

如果要检查浏览器，必须查看以下链接:http://jsfiddle.net/9zxvE/383/

#9

-1

Use event close button of fancybox:

使用fancybox关闭按钮:

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

#1