Fancybox: оверлей открывается внутри div по желанию, но не содержимое

В настоящее время у меня есть оверлей Fancybox, открывающийся внутри моего #main div по желанию, а не поведение по умолчанию при открытии внутри элемента body.

Я сделал это, как было предложено в нескольких потоках stackoverflow, изменив скрипт jquery.fancybox.js в этой строке:

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.length ? parent : 'body' );

к этому:

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.length ? parent : '#main' );

Это работает для позиционирования наложения.

Я хочу, чтобы Fancybox центрировал весь всплывающий контент в этом оверлее. Однако первое открывающееся содержимое Fancybox находится не в центре оверлея, а внутри body — такое неожиданное поведение иногда приводит к тому, что содержимое fancybox частично выходит за пределы оверлея. Последующие элементы fancybox центрируются внутри оверлея — только первый загруженный элемент центрируется на body.

Очевидно, что Fancybox прилагает немало усилий, чтобы вычислить размеры области просмотра и сделать возможным центрирование своего содержимого внутри элемента body, но в этом случае я хочу, чтобы все элементы были центрированы в моем целевом #main div, в пределах .fancybox-overlay.

Правка: "parent.lenth", опечатка в исходном файле jquery.fancybox.js, изменена на "parent.length", как указано djehrame ниже. К сожалению, поведение сохраняется.