从jQuery关闭fancybox [英] close fancybox from jquery

问题描述

我有一个函数，当单击我的幻想框内容中的某些内容时，该函数将被执行.这些功能可以正常工作，但是我一生无法解决如何以编程方式关闭fancybox的问题.我已经尝试过:

I have a function that gets executed when clicking on certain things within the content of my fancybox. The functions work fine, but I cannot, for the life of me, figure out how to close fancybox programmatically. I have tried:

$.fancybox.close()和parent.$.fancybox.close(); 我什至尝试触发click到关闭按钮，但这也没有用.

$.fancybox.close() and parent.$.fancybox.close(); I have even tried triggering a click to the close button but that has not worked either.

当我尝试$.fancybox.close()时我会得到

Uncaught TypeError: Cannot call method 'close' of undefined 

这是我的fancybox呼叫的样子:

Here is what my fancybox call looks like:

<a href="#display" class="fancybox" id="query" style="text-decoration:none; color:#000;" title="" data-fancybox-width="950">Open</a>

这是我的函数的外观(附在父页面的头部)

Here is what my function looks like (attached to the parent page's head)

$(document).on('click', ".group_box", function(e){

var nodeName = e.target.nodeName
//validation to ensure an input button was not pressed
if (nodeName != "INPUT"){
    $.fancybox.close();
  }   

任何帮助表示赞赏

推荐答案

我认为您有两个选择:

1).创建一个关闭按钮(带有<a>标记)，然后将$.fancybox.close()方法直接传递到其href属性中，例如"

1). Create a close button (with an <a> tag) and pass the $.fancybox.close() method directly into its href attribute like "

<a class="closeFancybox1" href="javascript:jQuery.fancybox.close()">close option 1</a>

此链接可以通过#display div内的ajax调用添加，也可以在显示后将其附加到fancybox内容中.

This link can be added by your ajax call inside the #display div or you can append it to the fancybox content after show.

2).使用唯一选择器创建关闭按钮，并将click事件绑定到该按钮，以触发$.fancybox.close()方法，直到在fancybox内可见

2). Create a close button using a unique selector and bind a click event to it to trigger the $.fancybox.close() method only until is visible inside fancybox

因此在您的fancybox内容中包含此html

so having this html inside your fancybox content

<a class="closeFancybox2" href="javascript:;">close option 2</a>

将click事件绑定到它以使用afterShow回调(如

bind a click event to it to trigger the $.fancybox.close() method using the afterShow callback like

afterShow: function () {
    $(".fancybox-inner").on("click", ".closeFancybox2", function () {
        $.fancybox.close();
    });
}

通知，我们仍然使用.on()的委派形式.

Notice we still used .on() in its delegated form.

同时使用这两个选项，请参见 JSFIDDLE .

see JSFIDDLE using both options.

这篇关于从jQuery关闭fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！