Question

当用户点击选项时，会弹出具有所有选项的fancybox。当用户点击任何列出的选项时，与该选项相关的内容会出现在同一弹出窗口中但弹出的fancybox永远不会拉伸（自动）在新的div内容周围调整高度和宽度.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，而不会过度使用javascript。另请注意id="#options"不正确.... hash中的#options用于引用id="options"（例如href内）但不是ID height名称的一部分。

其次，如果您希望fancybox调整width和width，那么您需要至少为隐藏内容设置一些height（通常为{{1}将自动计算），如：

<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()属性中使用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>

参见 working DEMO

注意：此解决方案适用于fancybox v2.1.3 +

当内容发生变化时，自动调整FancyBox弹出的高度？

1 个答案: