使用FancyBox加载内联内容 [英] Loading inline content using FancyBox

问题描述

好吧，我只是写这篇文章，希望可以帮助其他人可能遇到同样的问题。

供应商网站上的例子有点模糊，我假设了以下情况。

---

您有一个 href n到某些内容的 #id 。

 < a href =＃content-divclass =fancybox>打开示例< / a> 
  

您有一个div来保存该内容。

 < div id =content-divstyle =display：none>部分内容< / div& 
  

然后，您只需通过1-liner运行Fancybox。 >

  $（。fancybox）。 
  

自然，您会认为Fancybox会复制内容并更改 display：none 到 display：block ，一切正常。

但这不会发生。

它仍然加载内容，但内容已隐藏，并且您有一个空白的Fancybox。 * cry *

解决方案

只需 换 strong> c>显示：none 和 您的内容 strong> Bob 是您的叔叔。

 < div style =display：none> 
< div id =content-div>这里有一些内容< / div> 
< / div> 
  

Voila

Well, I'm simply writing this post to hopefully help others that might come across the same issue.

The examples on the vendor website are a little vague and I had assumed the following scenario.

---

You have a link with a hrefn to some content's #id.

<a href="#content-div" class="fancybox">Open Example</a>

And you have a div to hold that content.

<div id="content-div" style="display: none">Some content here</div>

Then you simply run Fancybox through a 1-liner.

$(".fancybox").fancybox();

Naturally, you'd think that Fancybox will copy the content and change display: none to display: block and everything will be ok.

But this doesn't happen.
It still loads the content but the content is hidden and you have a blank Fancybox. *cry*

解决方案

The solution is very simple, but took me about 2 hours and half the hair on my head to find it.

Simply wrap your content with a (redundant) div that has display: none and Bob is your uncle.

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

Voila

这篇关于使用FancyBox加载内联内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！