當內容改變時，自動調整FancyBox彈出的高度？

Question

當用戶點擊選項時，fancybox會彈出所有選項。當用戶點擊任何列出的選項時，與該選項相關的內容將出現在相同的彈出窗口中，但fancybox彈出窗口永遠不會拉伸（自動調整圍繞新的div高度和寬度）content.Plz幫助

<div class="modelbox" id="#options">Options</div> //when user clicks here a fance box appeares with few options,say three. 


    <div style="display:none" id="options"> 
    <p onclick="$("#option1div").show()" >option 1</p>  //when user clicks anyone one of these option.then the belov div opens on the fancy form. **problem is that.div opens but with the scrollbars and hight of the fancebox pop up form neve adjusted acorting to the new div content. help plz** 
    <p onclick="$("#option2div").show()">option 2</p> 
    <p onclick="$("#option3div").show()">option 3</p> 
    <div> 


    <div style="display:none" id="option1div"> large data here</div> 
    <div style="display:none" id="option2div"> large data here</div> 
    <div style="display:none" id="option3div"> large data here</div> 

Answer 1

簡單來說，這將是更好的綁定的fancybox到像一個鏈接<a>：

<a class="modelbox" href="#options">Options</a> 

...這樣我們可以通過內聯內容的href而不過度使用javasc RIPT。另請注意，id="#options"是不正確的.... hash在#options用於指代id="options"（例如在href內），但不是ID的名稱的一部分。

其次，如果你想的fancybox調整height和width，那麼你就需要一些width設置，至少，你隱藏的內容（通常是height將自動計算），如：

<div style="display:none; width: 320px" id="option1div"> large data here</div> 
<div style="display:none; width: 320px" id="option2div"> large data here</div> 
<div style="display:none; width: 320px" id="option3div"> large data here</div> 

那麼你的fancybox自定義腳本應該有（至少）選項fitToView設置爲false，否則的fancybox將始終顯示滾動條，當內容是不是像視口的height長：

$(".modelbox").fancybox({ 
    fitToView: false 
}); 

最後，爲了的fancybox的大小調整到新的顯示內容，您需要使用您的onclick屬性像內的API方法$.fancybox.update()：

<div style="display:none" id="options"> 
    <p onclick='$("#option1div").show(); $.fancybox.update();'>option 1</p> 
    <p onclick='$("#option2div").show(); $.fancybox.update();'>option 2</p> 
    <p onclick='$("#option3div").show(); $.fancybox.update();'>option 3</p> 
    <div> 

見working DEMO

備註：此解決方案適用於fancybox v2.1.3 +