我有一个指向可能很大的数据表的链接:
<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 模态正确调整自身大小？
最佳答案
您可以强制指定 fancybox 的大小:
$.fancybox(
'<p>BOX CONTENT</p>',
{
'autoDimensions' : false,
'width' : 800,
'height' : 600,
'scrolling' : 'yes' //or auto depending on preference
}
);
我假设强制尺寸“小于”内容将激活滚动方法。检查有关此问题的 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
关于jquery - AJAX 数据强制 FancyBox 模式大于浏览器窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5405752/