我必须在我的网站上运行带有触发点击的fancybox,我发现的问题是使用这种方法如果你点击fancy box内的元素,花式框将关闭并再次出现(闪烁)。
我希望 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');
});
有什么想法吗?
最佳答案
您的代码的问题在于您正在使选择器 #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
关于javascript - 带有触发点击的 fancybox 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18573059/