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>

其中#welcomePopup是fancybox 触发器

另一方面，如果#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();              
});

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

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

或

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

Fancybox无法使用特定选择器

1 个答案: