Fancybox可见性问题
在隐藏它的#inline2中设置样式时,Fancybox在点击时显示为空。另外,当没有样式隐藏它时,可以在Fancybox中看到#inline2元素。虽然这个例子直接从官方Fancybox网站上的各种示例中复制。请参阅http://fancybox.net/home上的各种示例。Fancybox可见性问题
有人请赐教,告诉我我做错了什么!我显然只想在Fancybox中显示#inline2元素,而不是作为页面的常规部分。
在此先感谢
/有什么应该是一件容易的事花上几个小时的家伙!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="da">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" href="/css/jquery.fancybox-1.3.1.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#various2").fancybox({
'modal' : true,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
});
</script>
</head>
<body>
<a id="various2" href="#inline2">Inline - modal window</a>
<div id="inline2" style="display:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></p>
</div>
</body>
</html>
当我看着this example,它变得很明显,你必须锚元素的href
指向div
内另一个与style="display:none"
(见#4),所以你不应该把div
内的实际内容与display:none
,否则内容将保持隐藏状态(如您在Firebug中所见)。
更改您的代码
<div style="display:none"><div id="inline2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div></div>
BTW,存在一些误区你的页面中,如关闭标签</a>
在#inline2
,和其他一些人。当您的页面使用XML解析器呈现时,用户只会看到一个(可能是黄色)错误页面。
你是对的。我正在查看在FrontPage中证明的例子,只是复制他们的方式。奇怪。 我不能够感谢你。 – Kristian 2010-07-06 00:02:23
给ID inline2
到p
元素
<div style="display:none;">
<p id="inline2">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. </p>
</div>
如果你希望你的XHTML验证,以及,你必须
- 变化
<html lang="da">
到<html lang="da" xmlns="http://www.w3.org/1999/xhtml">
。 - 正确关闭meta元素
/>
。 - 为文档添加标题。
- 将超链接包含在块元素中。
- 删除
p
元素中的额外</a>
。
对不起,好像我的代码被粘贴错了。请参阅完整的代码视图:http://pastie.org/1031860 – Kristian 2010-07-05 22:20:32