Question

我有以下脚本：

<script>

$(function() {
    $('#close-button').click(function(event) {
        $.fancybox.close(true);
    });
});

</script>

当用户点击自定义关闭按钮（forgetit_btn.jpg）时，我正在尝试关闭fancybox2模式。这就是我一直在尝试使用的：

<img id="close-button" src="_assets/img/forgetit_btn.jpg" />

更多信息：

以下是我用来从page1.php

调用fancybox的代码

$(document).ready(function() {
  $(".various").fancybox({
    maxWidth    : '100%',
    maxHeight   : 600,
    fitToView   : false,
    width       : '90%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    scrolling   : 'no'
  });
});

以下是page1.php上打开fancybox的代码：

   <a class="various fancybox.iframe" href="page2.php">Inactivate My Profile</a>

本文最顶部的脚本位于page2.php

Answer 1

我认为这是因为它被加载到iframe中并且您正在调用的$ .fancybox与正在打开的那个不同。见：HTML iframes and javascript。

您可以在调用页面的fancybox中使用afterShow事件来附加click事件。将其添加到page1.php

上的选项中

afterShow : function() {
  $('#close-button', $('.fancybox-iframe').contents())
  .click(function(event) {
    $.fancybox.close(true);
  });
}

如果您愿意，或者在page2.php中，您需要访问顶级框架范围并以此方式获取fancybox。

$(function() {
  $('#close-button').click(function(event) {
    frames.top.$.fancybox.close(true);
  });
});

用按钮关闭fancybox2模态

1 个答案: