0

ユーザーがオプションをクリックすると、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>
4

1 に答える 1

2

簡単に言えば、fancybox を次の<a>ようなリンクにバインドする方が良いでしょう:

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

... このようにして、hrefJavaScript を過度に使用することなく、インライン コンテンツの を渡すことができました。id="#options"また、が正しくないことに注意してください .... hashinは (たとえばの内部で)#optionsを参照するために使用されますが、の名前の一部ではありません。id="options"hrefID

第二に、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 のサイズを新しい表示コンテンツに合わせて調整するには、次のような属性$.fancybox.update()内でAPI メソッドを使用する必要があります。onclick

   <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>

実際のデモを見る

注：このソリューションはfancybox v2.1.3+用です

于 2012-12-27T09:42:42.613 に答える