Question

我是JQuery和Fancybox的新手，所以请具体说明答案。我试图在具有透明背景的绝对定位FancyBox中加载内容。这个盒子永远不应该关闭。

我还在页面上有链接打开带有.PDF内容的FancyBox。

两者都独立工作。我需要他们一起工作。

我需要知道如何控制每种风格。我能找到的唯一参考是在本页的底部：http://www.givegoodweb.com/post/125/sizing-and-positioning-fancybox，但这个答案对我目前的知识来说还不够具体。

据我所知，到目前为止，#page-1 #fancybox {etc...}位于CSS中，并与具有ID ="page-1"的标记相关。

我需要HTML代码，CSS和FancyBox代码的示例。可以做空。

提前感谢大家的帮助。

Answer 1

Fancybox有一个defaults选项

defaults: {wrapCSS: 'fancybox-default'}

将wrapCSS选项添加到您的fancybox调用中。请参阅Fancybox documentation

Answer 2

考虑到你使用'内容'（我假设是HTML）而不是图像，我认为你会更好地使用一个名为colorbox的非常类似的脚本： http://colorpowered.com/colorbox/

实施起来非常容易。

1）调用头部的jquery和colorbox脚本：

<script src="/backend/js/jquery-1.4.2.min.js"></script> 
<script src="/backend/js/jquery.colorbox-min.js"></script>

2）现在你在头脑中做了一点点微小的JS。将颜色框脚本绑定到站点上的相应位置（类，div，锚标记），当用户单击页面时，您实际需要显示这些模式窗口。

<script language="javascript" type="text/javascript">  
    $(document).ready(function(){
        $("a[rel='example1']").colorbox();
        $("a[rel='example2']").colorbox();
        $("a[rel='example3']").colorbox();              
        $("a[rel='example4']").colorbox();
        $("a[rel='example5']").colorbox();
    });
</script>

这使用jquery语法并将示例绑定到锚标签（因为我发现大多数时候人们想要超链接打开新的模态窗口）记住你可以使用其他东西，比如div，查看示例：http://colorpowered.com/colorbox/core/example3/index.html < / p>

3）现在，您只需将'rel'属性放入页面上的锚标记中，并将其链接到您想要作为模态窗口打开的外部HTML文件：

<a rel='example1' href="/portfolio/examples/testpage.html" title="Your text here">Click this link to open a modal window</a>

就CSS而言，将模态窗口元素视为任何普通页面元素。样式表中的所有样式都将递归到模态空间中。希望这可以帮助。如果您需要更实际的示例，请查看我的网站：http://jollygreendesigns.com/portfolio/

两种不同的FancyBox风格

2 个答案: