Question

我有一个可能很大的数据表的链接：

<a class="tabledata" href="table.php">View data</a>

在页面的头部，我加载了jQuery和FancyBox，然后使用以下内容从虚拟HTML页面中提取表格片段：

$("a.tabledata").fancybox({
    'type': 'ajax',
    'ajax': { 
        dataFilter: function(data){
            return $(data).find('table');
        }
     }
});

在table.php我有一张大数据表。下面是我一直用来试图调试这个问题的无格式假人：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dummy table</title>
</head>
<body>
  <div id="transactions" class="panel">
    <h4>Transactions</h4>
    <table class="data_list">
      <tr>
        <th>ID</th><th>Row class</th><th>Hash</th>
      </tr>
<?php
$c = 0;
while ( $c < 100 ) : ?>
      <tr class="<?php echo ( $c++ % 2 == 1 ) ? 'odd' : 'even'; ?>">
        <td><?php echo $c; ?></td>
        <td><?php echo ( $c % 2 == 1 ) ? 'odd' : 'even'; ?></td>
        <td><?php echo md5( $c ); ?></td>
      </tr>
<?php endwhile; ?>
    </table>
  </div>
</body>
</html>

小表格完美显示。

如果我将大表加载为FancyBox iFrame，它在浏览器窗口中正确定位，右侧有一个滚动条。

如果我通过FancyBox AJAX加载大表（我需要做的是为了隔离所需的页面片段），FancyBox模式扩展到浏览器窗口的底部 - 甚至超出了背景覆盖。

如何强制AJAX FancyBox模式正确调整大小？

Answer 1

你可以强制fancybox的大小：

$.fancybox(
    '<p>BOX CONTENT</p>',
    {
        'autoDimensions'    : false,
        'width'             : 800,
        'height'            : 600,
        'scrolling'        : 'yes' //or auto depending on preference
    }
);

我认为将尺寸强制为＆＃34;较小＆＃34;比内容会激活滚动方法。在这个问题上查看Fancybox文档。

鉴于你的例子：

$("a.tabledata").fancybox({
    'type': 'ajax',
    'ajax': { 
                dataFilter: function(data){
                    return $(data).find('table');
                }
            },
    'width':800,
    'height':600,
    'autoDimensions':false,
    'scrolling':'yes' //or auto depending on preference
});

autoDimensions默认为true并调整模式框的大小以适应内容，如果内容很大并且离开页面，则模式框将适合它，从而离开页面。设置框的高度和宽度，然后禁用autoDimensions将允许调整大小。

<强>更新

我刚才有了另一个想法。如果你使用div将表格包装在html中并使用overflow:auto将div设置为特定尺寸，然后将div调用到ajax而不是表格中，它应该可以正常工作。

这里有很多例子：http://fancybox.net/blog

Answer 2

我通常不会在这里发帖，但是这个也让我发疯了。

我解决它的方法是将fitToView设置为false并关闭滚动。

jQuery(".various").fancybox({
    maxWidth    : 950,
    maxHeight   : 2000,
    fitToView   : false,
    width       : '88%',
    height      : 1300,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    autoDimensions  : false,
    scrolling   : 'no'
});

强制FancyBox模式的AJAX数据大于浏览器窗口

2 个答案: