Данные AJAX заставляют модальность FancyBox быть больше окна браузера - PullRequest
Новая
       2

Данные AJAX заставляют модальность FancyBox быть больше окна браузера

3 голосов
/ 23 марта 2011

У меня есть ссылка на потенциально большую таблицу данных: 

<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 правильно масштабировать себя?

Ответы [ 2 ]

4 голосов
/ 23 марта 2011

Вы можете принудительно установить размер fancybox: 

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

Я предполагаю, что принудительный размер "меньше", чем содержимое, активирует метод прокрутки. Проверьте Fancybox Docs по этому вопросу.

Учитывая ваш пример: 

$("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 позволит изменить размеры.

Обновление:

У меня только что была другая идея. Если вы оберните таблицу в html с помощью div и добавите div к определенным измерениям с помощью overflow:auto, тогда вызовите div в ajax вместо таблицы, это должно сработать.

Здесь много примеров: http://fancybox.net/blog

1 голос
/ 22 мая 2012

Я обычно не пишу здесь, но это тоже сводило меня с ума.

Я решил, что для 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'
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...