【问题标题】:Fancybox won't respect heightFancybox 不尊重身高
【发布时间】:2012-01-24 06:06:38
【问题描述】:

如果我不设置框的高度并默认保留:滚动条显示为框不够大

$('#newsletter').fancybox({
    'type': 'iframe',
    'href': 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
});

如果我将其设置为 400:

$('#newsletter').fancybox({
    'type' : 'iframe',
    'href' :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'padding' : '20',
    'height' : '400'
});

(看起来比 400 大)

也试过

$('#newsletter').fancybox({
    'type'              : 'iframe',
    'href'          :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'height' : '400px',
    'transitionIn'  :   'elastic',
},function(){$.fancybox.resize();});

与第一个示例给出相同的结果

【问题讨论】:

    标签: javascript jquery height fancybox


    【解决方案1】:

    我认为您在这里遇到的问题实际上是在 iFrame 而不是花式框内。 iframe 不会根据内容的大小设置其尺寸。我的建议是避免使用 iframe,因为它们几乎总是有问题

    【讨论】:

    • 感谢您的建议,但我怎么可能不使用 iframe 打开它?
    • 您可以通过 ajax 获取内容并将其包装在自己的表单标签中(除非您使用的是 ASP.NET 并且页面上有另一个表单标签)。这是一件非常棘手的事情,尤其是顺利进行。如果您想保留 iframe,您确实必须手动设置 iframe 的大小(当您将内容从不同站点加载到当前站点时,您无法真正动态地进行设置)
    【解决方案2】:
    1. 有时,由于缩放而发生。
    2. 您能否尝试更新'height' : '400px'。它可能有效。

    【讨论】:

      【解决方案3】:

      您可以尝试使用公共方法resize,一旦内容加载完毕,请参阅方法说明:

      *自动调整 FancyBox 高度以匹配内容高度

      参考: http://fancybox.net/api

      方法用法: $.fancybox.resize();

      你可以尝试什么:

          $('#newsletter').fancybox({
                              'type'          : 'iframe',
                              'href'          : 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
                              'scrolling'     : 'no',
                              onComplete : function(){ $.fancybox.resize();}
                      });
      

      onComplete - 一旦显示内容就会被调用

      【讨论】:

      • resize 方法到底是在哪里添加的,什么时候调用的?
      • 查看更新的答案。您必须使用 onComplete 然后调用该方法。
      • 用我找到的可行解决方案编辑了您的答案,我想这就是它
      猜你喜欢
      • 2016-09-23
      • 1970-01-01
      • 2012-06-06
      • 1970-01-01
      • 2013-04-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-04
      相关资源
      最近更新 更多