Fancybox自动调整大小并设置限制

Question

我们都知道fancybox具备调整大小的功能，这很好，但是，如果内容比你的屏幕还大，它也会被调整大小，并且你需要使用浏览器滚动条向下滚动，而不是使用fancybox的滚动条。

为了避免出现快速混乱的调整大小，我建议这样做。

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('MyTagValue').fancybox(
        {
            'titlePosition' : 'inside',
            'transitionIn'  : 'fade',
            'transitionOut' : 'fade',
            'onStart' : function()
            { 
                $('#MyTagStyle').css(
                {
                    marginLeft: '-10000px'
                }); 
            }, 
            'onComplete' : function()
            { 
                $.fancybox.resize(); 
                $('#MyTagStyle').css(
                {
                    marginLeft: '0px'
                }); 
            }  
        });
    });
</script>

我有一个问题，如何在浏览器屏幕内调整大小，或者不超过特定值，例如我想要自动调整大小，但不超过宽度：800px; 高度：900px;

为了说明我现在的情况和我想要实现的目标，这里有一些屏幕截图：

当前： 期望： 有什么想法吗？

- Lukas Šalkauskas

Answer 1

FancyBox内置了一种方法，可以将生成的“窗口”大小设置为内容大小...请查看网站获取更多指示，但这里有一个提示：

// initialize popup iframe (fancybox)
$(".popupIframe").fancybox({
    'autoDimensions': false,
    'padding'       : 0,
    'width'         : 940,
    'height'        : 400,
    'autoScale'     : false,
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'type'          : 'iframe'
});

在这里，我正在设置一个大小为940px x 400px（也可以是％值）的弹出窗口...如果内容比fancybox容器更大，则会在同一容器上生成滚动条，而不是在文档本身上！！！

PS：如果我正确理解了你的问题！

- Zuul

---

如果我一直有大量的内容，那么一切都会很好，但是我也需要自动缩放功能，以获得像这样的结果：http://yfrog.com/7243150716p，这就是为什么我需要一种设置最大高度和最大宽度的方法... - Lukas Šalkauskas

Answer 2

通过编辑MyTagStyle解决了这个问题：

.MyTagStyle
{
    max-height:600px;
    max-width:940px;
    overflow:auto;
}

- Lukas Šalkauskas

---

如果内部窗口大小小于600像素，例如在netbook或平板电脑上，这是否仍会导致滚动条？ - EricP