Question

我有一个在点击我的fancybox内容中的某些内容时执行的功能。功能很好，但我不能，为了我的生活，弄清楚如何以编程方式关闭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调用添加，也可以在show之后将其附加到fancybox内容。

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

所以在你的fancybox内容中有这个html

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

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

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

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

使用这两个选项查看 JSFIDDLE 。

从jquery关闭fancybox

1 个答案: