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将获取具有与链接的href匹配的ID的元素，该元素无法隐藏，因此必须将其包装在另一个隐藏的元素中。

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

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

fancybox内容未隐藏

1 个答案: