jquery - fancybox 内容未隐藏

Question

我正在使用内联 Fancybox第一次，由于某种原因，我无法显示/隐藏 Fancybox 中的内容。

这是我的代码:

html

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a>

<div id="assocUserDialogBox">
  My content here
</div>

CSS

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; }

js

$('#openUserDialogBox').fancybox({
  'showCloseButton' : true,
  'enableEscapeButton' : true
});

以上代码正确打开 Fancybox 并显示内容。
问题在于，在单击 Fancybox 链接之前，内容并未隐藏在页面上。

如果我改变CSS:

#assocUserDialogBox { width: 400px; text-align: center; padding: 20px; display: none; }

这会隐藏主页中的内容，但也会隐藏 Fancybox 弹出窗口中的内容。

我在这里缺少什么？

Answer 1

您可能需要将其包装起来，如下所示:

<a id="openUserDialogBox" href="#assocUserDialogBox">Click</a>

<div style="display:none">
    <div id="assocUserDialogBox">
        My content here
    </div>
</div>

Fancybox 将获取 ID 与链接的 href 匹配的元素，该元素无法隐藏，因此必须将其包装在另一个隐藏的元素内。

如果内容包含按钮等内容，将 hideOnContentClick 设置为 false 也是一个好主意:

$('#openUserDialogBox').fancybox({
  'hideOnContentClick': false,
  'showCloseButton' : true,
  'enableEscapeButton' : true
});