Augmenter la taille du corps par rapport à Fancybox

Question

I Utilisez Fancybox pour afficher des formulaires complexes sur un site intranet. La page à partir de laquelle les formulaires Fancybox sont lancés utilise Datatables pour filtrer le filtre et trier de nombreux enregistrements de la base de données. Lorsque la liste est filtrée de manière significative et que la Fancybox est chargée, le contenu Fancybox peut dépasser le corps de la page. Cela entraîne une zone blanche où la superposition Fancybox ne s'affiche pas. En plus d'être moche, vous ne pouvez pas cliquer dans cette zone pour fermer la boîte de dialogue Fancybox.

Quelle est la meilleure façon de faire croître le corps de ma page à au moins la hauteur de la Fancybox, soit avec CSS, Javascript ou les deux?

Merci!

EDIT: La solution de Gov ci-dessous est correcte mais ne résout pas le problème. En fait, la hauteur de la superposition Fancybox elle-même doit être augmentée. Je perçois maintenant cela comme un bug avec Fancybox. Il semble que si le corps se développe en raison de la taille de Fancybox, alors la superposition devrait augmenter automatiquement à la taille du corps. Je vais soumettre ceci aux développeurs. En attendant, si quelqu'un a cette question le code de Gov comme je l'ai modifié, il fonctionnera:

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

Je veux aussi noter que Fancybox est un plugin vraiment super, donc cela ne devrait pas être pris à se balancer de personne contre l'utilisation il!

Answer 1

Calculer la hauteur de la boîte de fantaisie, supposons id fancybox est fancyboxid1

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

// determine how much width you want// 

finalheight=fancyBoxHeight+300 or 400 

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

Vous devez exécuter le code ci-dessus, après que vous affichez la fancybox, il définit la hauteur au besoin.

Answer 2

Je viens de trouver que la modification de la CSS fonctionne.

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