从jQuery关闭fancybox

Question

我有一个功能，当单击我的花哨框内容中的某些内容时，该函数便会执行。 这些功能可以正常工作，但是我一生无法解决如何以编程方式关闭fancybox的问题。 我努力了：

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

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

Uncaught TypeError: Cannot call method 'close' of undefined 

这是我的fancybox调用的样子：

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

这是我的函数的样子（附在父页面的头部）

$(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();
  }   

任何帮助，不胜感激

Answer 1

我认为您有两种选择：

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

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

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

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

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

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

使用afterShow回调，将click事件绑定到它以触发$.fancybox.close()方法

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

注意，我们仍然以.on()的委派形式使用它。

参见使用这两个选项的JSFIDDLE 。