带有触发器点击的fancybox bug

Question

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

我希望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"
    });
});

哪里click不需要.

看到你更新了JSFIDDLE