gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:04:27 26 4
gpt4 key购买 nike

我有一个指向可能很大的数据表的链接:

<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com