Question

我使用Fancybox在Intranet站点上显示复杂表单。 Fancybox表单的页面是使用Datatables来过滤过滤器并对数据库中的大量记录进行排序。当列表被显着过滤并加载Fancybox时，Fancybox内容可能会超出页面正文。这会导致Fancybox叠加层未显示的白色区域。

除了丑陋之外，您无法在此区域中单击以关闭Fancybox。

使用CSS，Javascript或两者兼而有之，将页面主体增长到Fancybox的最高位置的最佳方法是什么？

谢谢！

编辑：以下Gov的解决方案是正确的，但没有解决问题。实际上，需要增加Fancybox覆盖层本身的高度。我现在认为这是Fancybox的一个错误。看起来如果身体因Fancybox尺寸而增长，那么叠加层应该自动增加到身体尺寸。我会将此提交给开发人员。与此同时，如果有人有这个问题Gov的代码，我修改它将起作用：

// Adjust Fancybox Overlay Height to Large Fancyboxes
function overlayHeight() {
  fancyBoxHeight = $('#fancybox-wrap').height(); 
  finalheight = fancyBoxHeight + 300;
  $('#fancybox-overlay').css('height', finalheight);
}

我还想注意Fancybox是一个非常好的插件，所以不应该让任何人反对使用它！

Answer 1

我刚刚发现修改CSS有效。

#fancybox-overlay {
    position: fixed; //I just changed the position to fixed, and voila
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;

Answer 2

计算花式框的高度，假设fancybox id为fancyboxid1

fancyBoxHeight=$('#fancyboxid').height(); 

// determine how much width you want//

finalheight=fancyBoxHeight+300 or 400

 $('body').css('height', finalheight);

您需要在显示fancybox后执行上述代码，然后根据需要设置高度。

相对于Fancybox增加身高

2 个答案: