Fancybox visibility problem
When setting a style at #inline2 hiding it, Fancybox will appear empty on click. In addition the #inline2 element can be seen in Fancybox when there's no style hiding it. Though this example is copy'ed directly from the various examples on the official Fancybox site. See Various Examples at http://fancybox.net/home.
Someone please enlighten me, and tell me what I'm doing wrong! I obviously only want the #inline2 element to be shown in Fancybox, and not as a regular part of my pag开发者_StackOverflow社区e.
Thanks in advance
/The guy having spend hours on what should be an easy job!
<!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>
When I look at this example, it becomes obvious that you have to point the href of the anchor element to a div within another one with style="display:none" (see #4), so you shouldn't put the actual contents within a div with display:none, otherwise the contents will remain hidden (as you can see in Firebug).
Change your code to
<div style="display:none"><div id="inline2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div></div>
BTW, there are some errors within your page, like the closing tag </a> in #inline2, and some others. When your page is rendered using an XML parser, your users will only see a (probably yellow) error page.
Assign id inline2 to the p element
<div style="display:none;">
<p id="inline2">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. </p>
</div>
If you want your XHTML to validate as well, you have to
- Change
<html lang="da">to<html lang="da" xmlns="http://www.w3.org/1999/xhtml">. - Close the meta element properly
/>. - Add a title for your document.
- Enclose the hyperlink in a block element.
- Remove the extra
</a>in yourpelement.
加载中,请稍侯......
精彩评论