使用FancyBox加载内联内容
那么，我只是写这篇文章，希望能帮助其他可能遇到同样问题的人。
供应商网站上的例子有点含糊，我假定了以下情况。
你有一个href链接到某些内容的#id 。
<a href="#content-div" class="fancybox">Open Example</a>
你有一个div来保存这个内容。
<div id="content-div" style="display: none">Some content here</div>
然后你只需运行Fancybox通过一个class轮。
$(".fancybox").fancybox();
当然 ，你会认为Fancybox会复制内容和更改display: none display: block ，一切都会好的。
但是这不会发生。
它仍然加载的内容，但内容是隐藏的，你有一个空白Fancybox。 *cry*
解决方法非常简单，但是把我头上约2个半小时的头发find了。
简单地用一个（多余的） div来包装你的内容，其中display: none ， Bob是你的叔叔。
<div style="display: none"> <div id="content-div">Some content here</div> </div>
瞧
我花了很多时间试图解决这个问题，而且我所做的是通过Fancybox安装打包的示例index.html / style.css。
如果您查看演示网站使用的代码，基本上复制/粘贴，你会没事的。
要使内联Fancybox正常工作，您需要在index.html文件中包含以下代码：
<head> <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#various1").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> </head> <body> <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a> <div style="display: none;"> <div id="inline1" style="width:400px;height:100px;overflow:auto;"> Write whatever text you want right here!! </div> </div>
请记住准确地说明脚本文件放置在哪个文件夹以及您在Head标签中指向的位置; 他们必须对应。
我希望这有帮助。
只是我发现的WordPress的用户，
听起来很明显，如果你的div根据通常链接到一个新的post页面的标题返回一些AJAX内容，一些教程将会说因为你将post数据返回到同一页面而返回false，返回将阻止页面移动。 但是，如果您返回false，则还会阻止Fancybox2执行此操作。 我花了几个小时试图弄清楚这个愚蠢的简单的事情。
所以对于这种types的链接，只要确保href属性是你希望select的哈希（＃）div，并且在你的javascript中，确保你不再返回false，因为你不再需要。
简单我知道^ _ ^
