AJAX數據強迫的fancybox模式比瀏覽器窗口大

我有一個鏈接到一個潛在的大表中的數據：AJAX數據強迫的fancybox模式比瀏覽器窗口大

<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模塊正確調整自己的尺寸？

來源

2011-03-23 Kalessin

您可以強制的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

來源

2011-03-23 13:17:48

你成功測試過了嗎？我試了一下，似乎沒有什麼區別。 FancyBox API說'width'和'height'是用於內容類型'iframe'和'swf'。 – Kalessin 2011-03-23 13:26:03

對不起，忘了複製'autoDimensions'屬性。如果你設置了高度和寬度，然後將'autoDimensions'設置爲'false'，它就可以工作。沒有經過測試，但它根據文檔工作，我認爲這是一個很好的來源:) – 2011-03-23 13:29:50

有另一種想法，更新的答案 – 2011-03-23 13:35:04

我通常不張貼在這裏，但是這一次是推動我瘋了也。

我解決它的方法是將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' 
});

來源

2012-05-22 02:00:20 Micah

AJAX數據強迫的fancybox模式比瀏覽器窗口大

回答

相關問題