Увеличьте рост тела относительно Fancybox

Question

Я использую Fancybox для отображения сложных форм на сайте интрасети. Страница форм Fancybox запускается из использования Datatables для фильтрации фильтра и сортировки многочисленных записей из базы данных. Когда список фильтруется значительно и Fancybox загружается, содержимое Fancybox может превышать тело страницы. Это приводит к белой области, где наложение Fancybox не отображается.

В дополнение к тому, чтобы быть уродливым, вы не можете щелкнуть в этой области, чтобы закрыть Fancybox.

Каков наилучший способ выращивания тела моей страницы, по крайней мере, для высоты Fancybox, либо с помощью CSS, Javascript или обоих?

Спасибо!

EDIT: Решение Gov приведено правильно, но не решает проблему. На самом деле нужно увеличить высоту наложения Fancybox. Я воспринимаю это сейчас как ошибку с Fancybox. Кажется, если тело растет из-за размера Fancybox, то наложение должно автоматически увеличиваться до размера тела. Я отправлю это разработчикам. В то же время, если кто-нибудь имеют код этого вопроса г как я изменил это будет работать:

// Adjust Fancybox Overlay Height to Large Fancyboxes 
function overlayHeight() { 
    fancyBoxHeight = $('#fancybox-wrap').height(); 
    finalheight = fancyBoxHeight + 300; 
    $('#fancybox-overlay').css('height', finalheight); 
} 

Я также хочу отметить, что FancyBox действительно отличный плагин, так что это не должно быть принято, чтобы поколебать от кого-либо против использования Это!

Answer 1

Вычислить высоту фантазии поле, предположим FancyBox идентификатор fancyboxid1

fancyBoxHeight=$('#fancyboxid').height(); 

// determine how much width you want// 

finalheight=fancyBoxHeight+300 or 400 

$('body').css('height', finalheight); 

Вы должны выполнить код выше, после того, как вы вызываете FancyBox, то он задает высоту по мере необходимости.

Answer 2

Я только что нашел, что изменение CSS работает.

#fancybox-overlay { 
    position: fixed; //I just changed the position to fixed, and voila 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1100; 
    display: none;