Redimensionnement dynamique de la fenêtre JBuery thickbox

Question

J'ai une thickbox qui apparaît lorsque vous cliquez sur un lien. En fonction de la taille du navigateur de l'utilisateur, je souhaite que l'épaisseur de la boîte soit de 500px ou plus et que la hauteur change de façon dynamique en fonction de la taille du navigateur de l'utilisateur. Est-ce possible?

Answer 1

Vous pouvez ajuster le css pour que la hauteur change dynamiquement. Quelque chose comme cela devrait fonctionner:

#TB_window { 
    top:0; 
    height:100%; 
    margin-top:0 !important; 
    border-top:0; 
    border-bottom:0; 
} 

Answer 2

Une autre option est d'utiliser JQuery pour travailler la taille du navigateur, puis redimensionner thickbox en fonction. ce n'est pas aussi élégant que la solution CSS mais juste pour compléter la réponse ... voici une méthode pour y arriver.

// set the displayWidth/Height to be 90% of the window 
var displayWidth = $(window).width() * 0.9; 
var displayHeight = $(window).height() * 0.9; 
// Animate the thickbox window to the new size (with 50px padding 
$("#TB_window").animate({ 
    marginLeft: 0 - (displayWidth + 50)/2, 
    marginTop: 0 - (displayHeight + 50)/2, 
    height: displayHeight + 50, 
    width: displayWidth + 30 
}, { 
    duration: 800 
}); 
$("#TB_ajaxContent").animate({ 
    height: displayHeight, 
    width: displayWidth 
}, { 
    duration: 800 
}); 

Answer 3

réponse Testé en utilisant seulement CSS:

@media all and (max-width: 640px){ 
    #TB_window { 
     top: 0 !important; 
     left: 0 !important; 
     margin-top: 0 !important; 
     margin-left: 0 !important; 
     height: 100%; 
     width: 100% !important; 
    } 
    #TB_iframeContent{ 
     max-width:100%; 
     width:100%; 
    } 
} 

Answer 4

Dans mon cas: (CSS seulement)

#TB_window { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-height: 100%; 
    max-width: 90%; 
    margin: 0 !important; 
} 
#TB_ajaxContent { 
    width: 100% !important; 
    height: auto !important; 
    max-width: 100%; 
    box-sizing: border-box; 
}