兩種不同的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風格

回答

相關問題