javascript - Fancybox 不适用于特定的选择器

Question

我使用此代码，但它不工作...

        $(document).ready(function () {
            $('#welcomePopup').fancybox();              
        });  

但另一个代码工作正常

$.fancybox({
                    'padding': 5,
                    'width': 625,
                    'height': 450,
                    'content': $("#welcomePopup").html()
                });

我想使用第一种方法，因为第二种方法重复 HTML。

有什么线索吗？

Answer 1

这个

$(document).ready(function () {
    $('#welcomePopup').fancybox();              
});

只将选择器绑定#welcomePopup到fancybox，但不会打开它。您仍然需要click在该选择器上打开 fancybox。

上面代码的正常情况是

<a id="welcomePopup" href="{your target content}">open fancybox</a>

#welcomePopupfancybox触发器在哪里

另一方面，如果内容#welcomePopup是您想要显示为 fancybox 内容（#welcomePopup是 fancybox目标），那么您需要另一个选择器作为触发器。

第二种情况的正常方法是：

html

<a class="fancybox" href="#welcomePopup">open welcome pop up in fancybox</a>
<div style="display: none;" id="welcomePopup">
    <h1>fancybox content</h1>
    <p>lorem ipsum</p>
</div>

jQuery

$(document).ready(function () {
    $('.fancybox').fancybox();              
});

最后，如果您想在没有触发器和页面加载的情况下打开fancybox，那么其中任何一个都可以解决问题

$.fancybox({
    'padding': 5,
    'width': 625,
    'height': 450,
    'href': "#welcomePopup"
});

或者

$.fancybox("#welcomePopup",{
    'padding': 5,
    'width': 625,
    'height': 450
});