fancybox 2與div

我以爲我有麻煩使用fancybox 2 nivo滑塊包裹的div，但經過一些測試，我發現我遇到麻煩使用facybox 2與div。所以我會重新組織我的問題。使其更清晰，我會後我的代碼如下所示：fancybox 2與div

對CSS：

<style> 
    #content{ 
    background: red; 
    } 
    #maximize{ width: 24px; height: 24px; } 
</style>

對於HTML：

<a href='#content' id="maximize"> max </a> 
<div id="content"> </div>

對於JS：

$('#maximize').click(function() { 
$('#maximize').fancybox({ 
    'href' : '#content' 
    }); 
});

它按預期工作，如果我點擊最大按鈕。但是，如果我關閉了fancybox，彈出框消失了，id =「content」的原始div也消失了。這不是預期的。我想讓內容變成現實，但不會消失。

其他問題：如何更改彈出的花式框的大小？我想讓更大的花式框變大。

我希望我的問題很清楚。提前致謝。

來源

2012-12-11 Joey

如果的fancybox打開'div'用'ID = 「滑蓋包裝」'，那麼它不應該是'$（「＃滑蓋包裝」）。顯示（）'在回調'後關閉'？ – JFK

你實際上並不需要：

$('#maximize').click(function() { 
    $('#maximize').fancybox({ 
    'href' : '#content' 
    }); 
});

...但僅此：

$('#maximize').fancybox({ 
    // API options here 
});

...因爲.fancybox()已經綁定click事件選擇#maximize，否則是多餘的... ... 'href' : '#content'選項也是如此，因爲href已從href attribut e在鏈接中。

另一方面，fancybox將始終隱藏打開的inline內容，因爲它會是其預期狀態（在fancybox中顯示的東西已經可見，這不是多餘的）？無論如何，你可以做到這一點可見再次使用回調afterClose，如：

$('#maximize').fancybox({ 
    afterClose: function() { 
     $("#content").show(); 
    } 
});

關於第二個問題，請使用fitToView和autoSize沿width和height選項設置你喜歡的箱體尺寸，如：

$('#maximize').fancybox({ 
    fitToView: false, // avoid the adjusting size to viewport 
    autoSize: false, // avoid set size based on content 
    width: 420, // or whatever 
    height: 320, 
    afterClose: function() { 
     $("#content").show(); 
    } 
});

見working DEMO

來源

2012-12-11 20:37:48 JFK

回答

相關問題