javascript - 触发点击的幻想框错误

Question

我必须在我的网站上用触发点击运行fancybox ，我发现的问题是，使用这种方法，如果你点击fancy box 内的元素，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"
    });
});

不需要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>

在这里检查

- - - - - - - - - - - 更新 - - - - - - - -

将 afterShow() 添加到您的 jquery

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

        }).click();

再检查一遍

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以打开内联的“注册”Fancybox 覆盖。感谢 JFK，我意识到我正在触发和定位 ID 为“signup”的元素，而不是 href 属性为“#signup”的元素。我让它连接到 URL 的最后一部分（即#signup）并查找匹配的“a”href 属性，并触发对该元素的单击。

下面的演示并不能真正帮助描述这一点，但您可以看到代码。

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

多汁的一点：

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