Question

我必须在我的网站上使用触发点击运行fancybox，我发现的问题是使用此方法如果您点击花式框内的元素，花式框将关闭并再次出现（闪烁）。

我希望fancybox在我点击框内的元素时防止闪烁，当我点击这些元素时我不想看到任何变化，那就是：）

我为这个问题创建了演示

<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

Answer 2

在html下方使用此功能，将id添加到<div>和<a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a>

<div id="a1">
    <p>Click on colors</p>
    <a class="fancybox" rel="group" href="#r"><div id="r" class="r"></div></a>
    <a class="fancybox" rel="group" href="#g"><div id="g" class="g"></div></a>
    <a class="fancybox" rel="group" href="#b"><div id="b" class="b"></div></a>
</div>

check here

<强> ----------------------更新---------------- < / p>

将afterShow（）添加到你的jquery

$('#a1').fancybox({ 
    afterClose: function()
            {
            console.log('closed :( ');
            },
            afterShow:function()
            {
                $('#a1').click(function(){return false;});
            }

        }).click();

Check again

Answer 3

我不知道它会有所帮助，或者只是试试这个，

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

});

Answer 4

我有一个不可点击的Fancybox叠加层的相同症状。我的客户希望能够链接并自动打开某个Fancybox，例如http://yoursite.com/#signup以打开内联注册＆＃39; Fancybox覆盖。感谢JFK，我意识到我正在触发并定位ID为＆＃39;注册＆＃39;而不是具有＆＃39; #regup＆＃39;的href属性的元素。我把它挂在URL的最后一部分（即#signup）上，然后查找匹配的＆＃39; a＆＃39; href属性，并触发对该元素的单击。

下面的演示并没有真正帮助描绘这个，但你可以看到代码。

http://jsfiddle.net/ca7no4yp/2/

多汁的一点：

$("a[href='#" + location.href.substr(location.href.indexOf('#')+1) + "']").fancybox().trigger('click');

带有触发器点击的fancybox bug

4 个答案: