两种不同的FancyBox风格

我是JQuery和Fancybox的新手，请具体回答。我正尝试在透明背景的绝对定位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代码的示例。可以简短。

非常感谢大家的帮助。

来源

2010-11-11 Maria

您是否有过迄今尝试过的例子？ – Kyle 2010-11-11 14:40:58

我还没有尝试过任何东西。一旦我更多地了解了fancybox的工作原理，我开始寻找解决方案。根据我迄今为止所了解的内容以及浏览jancybox .js文件，这仅仅是一个奇特的方块，您可以在显示它时更改它的属性。我需要两个奇特的盒子。 – Maria 2010-11-12 04:23:01

抱歉的错别字。我的意思是“浏览fancybox。js文件，只创建了一个fancybox“你可以在显示时改变它的属性，我需要两个花哨的盒子或者理解上面提到的链接中提供的答案。 – Maria 2010-11-12 04:25:32

考虑您使用“内容”（我将承担为HTML），而不是图片，我想你会被一个非常类似的脚本调用颜色框得到更好的服务： http://colorpowered.com/colorbox/

这是很容易实现。

1）在头调用jQuery和颜色框脚本：

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

2）现在，你的脑袋做一个很小，JS的点点。您将colorbox脚本绑定到您的网站上适当的位置（类，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

3）现在你要做的就是把“相对”属性到你的页面上的一个锚标记，并将其链接到外部HTML文件，你想开一个模态窗口：

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

至于CSS将模态窗口元素视为y你会任何正常的页面元素。样式表中的所有样式都会递归到模态空间中。希望这可以帮助。检查我的网站，如果你需要在这一行动的更真实的例子：http://jollygreendesigns.com/portfolio/

来源

2010-11-11 21:39:14 staypuftman

感谢StayPuftman。我会尝试它并让你知道结果如何。 – Maria 2010-11-11 22:56:41

的fancybox有defaults选项

defaults: {wrapCSS: 'fancybox-default'}

的wrapCSS选项添加到您的fancybox电话。查看Fancybox documentation

来源

2012-03-26 15:43:41

两种不同的FancyBox风格

回答

相关问题