0

当用户单击选项时，fancybox 会弹出所有选项。当用户单击任何列出的选项时，与该选项相关的内容会出现在同一个弹出窗口中，但fancybox 不会弹出（自动调整高度和宽度）围绕新的 div 内容。请帮助

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

...通过这种方式，我们可以在不过href度使用 javascript 的情况下传递内联内容。另请注意，这id="#options"是不正确的.... hashin#options用于指代id="options"（例如在内部href），但不是ID' 名称的一部分。

其次，如果您希望 fancybox 调整heightand 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，否则当内容比height视口长时，fancybox 将始终显示滚动条，例如： 

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

最后，为了将 fancybox 的大小调整为新的可见内容，您需要$.fancybox.update()在onclick属性中使用 API 方法，例如：

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