javascript - 带有触发点击的 fancybox 错误

Question

我必须在我的网站上运行带有触发点击的fancybox，我发现的问题是使用这种方法如果你点击fancy box内的元素，花式框将关闭并再次出现(闪烁)。

我希望 fancybox 在我点击框内的元素时防止闪烁，当我点击那些我不想看到任何变化的元素时，仅此而已:)

我为这个问题创建了演示

http://jsfiddle.net/NhWLc/5/

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

$(document).ready(function() {
  $('#a1').fancybox({   
    afterClose: function() {
      console.log('closed :( ');
    }
  }).click();// or .trigger('click');
});

有什么想法吗？

Answer 1

您的代码的问题在于您正在使选择器 #a1 同时充当:触发器 和 fancybox 的目标因此，对自身的任何点击都会一遍又一遍地触发 fancybox。

您需要创建另一个以 #a1 元素为目标的选择器(触发器)

<a class="fancybox" href="#a1">triggers fancybox</a>
<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

如果你不希望元素 .fancybox 可见，只需添加一个 display:none 属性

然后是你的js

$(document).ready(function () {
    $('.fancybox').fancybox({
        afterClose: function () {
            console.log('closed :( ');
        }
    }).trigger('click');
});

参见 JSFIDDLE

编辑:看着你的样本JSFIDDLE ，事情本来可以简单得多。

只有这个 html

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

你可以使用这段代码

$(document).ready(function () {
    $.fancybox({
        href: "#a1"
    });
});

不需要点击的地方。

更新见 JSFIDDLE