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
});