我正在使用内联 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 弹出窗口中的内容。
我在这里缺少什么?
最佳答案
您可能需要将其包装起来,如下所示:
<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
});
关于jquery - fancybox 内容未隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9557844/