Question

在#inline2中设置样式隐藏它时，Fancybox在点击时显示为空。另外，当没有样式隐藏它时，可以在Fancybox中看到#inline2元素。虽然这个例子是直接从官方Fancybox网站上的各种例子中复制而来的。请参阅http://fancybox.net/home处的各种示例。

有人请赐教，告诉我我做错了什么！我显然只希望#inline2元素显示在Fancybox中，而不是我页面的常规部分。

提前致谢

这个家伙花了几个小时做一件容易的工作！

    <!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>

Answer 1

当我查看this example时，很明显您必须将锚元素的href指向<{1}} 中的另一个<{1>} { {1}}（请参阅＃4），因此您不应将实际内容放在div style="display:none"内，否则内容将保持隐藏状态（正如您在Firebug中看到的那样）。

将您的代码更改为

div

顺便说一句，您的网页中存在一些错误，例如display:none中的结束标记<div style="display:none"><div id="inline2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   </p> </div></div>以及其他一些错误。当您使用XML解析器呈现页面时，您的用户只会看到（可能是黄色）错误页面。

Answer 2

将ID inline2分配给p元素

<div style="display:none;">
    <p id="inline2">Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. &nbsp;&nbsp;</p>
</div>

如果您希望XHTML也进行验证，则必须

将<html lang="da">更改为<html lang="da" xmlns="http://www.w3.org/1999/xhtml">。
正确关闭元素/>。
为您的文档添加标题。
将超链接括在块元素中。
删除</a>元素中的额外p。

Fancybox可见性问题

2 个答案: