Cambiar el tamaño emergente de la caja gruesa dinámicamente

Question

Estoy usando ThickBox para abrir una ventana emergente en mi página. En la ventana emergente hay una pestaña al hacer clic en la cual necesito cambiar el tamaño de la ventana emergente de ThickBox. Cómo puedo hacer eso ?

Gracias de antemano.

Answer 1

Este es el código que utilizan

$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH/2),10) + 'px', width: TB_WIDTH + 'px'}); 
    if (!(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6 
     $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT/2),10) + 'px'}); 
    } 

para que pueda utilizar el mismo con un ligero cambio (suponiendo que el uso de una versión moderna de jQuery) ..

$('#yourbutton').click(function() { 
    var TB_WIDTH = 100, 
     TB_HEIGHT = 100; // set the new width and height dimensions here.. 
    $("#TB_window").animate({ 
     marginLeft: '-' + parseInt((TB_WIDTH/2), 10) + 'px', 
     width: TB_WIDTH + 'px', 
     height: TB_HEIGHT + 'px', 
     marginTop: '-' + parseInt((TB_HEIGHT/2), 10) + 'px' 
    }); 
}); 

Demostración en http://jsfiddle.net/gaby/rrH8q/

Answer 2

Adjunte un controlador de evento click a dicha pestaña que cambia las dimensiones y los márgenes de TB_Window para centrarlo de nuevo, p.

$("#tab").click(function() { 
    $("#TB_window").css("height", newHeight); 
    $("#TB_window").css("width", newWidth); 
    $("#TB_window").css("margin-top", ($(window).height()-newHeight)/2); 
    $("#TB_window").css("margin-left", ($(window).width()-newWidth)/2); 
}); 

Answer 3

Una pequeña corrección en Gaby también conocido como la respuesta de G. Petrioli emergente de modo que debe establecer los márgenes también correctamente:

var TB_WIDTH = 500, TB_HEIGHT = 400; 
// set the new width and height dimensions here.. 
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH)/2),10) 
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT)/2),10) + 
'px"'}); 

Answer 4

hice algo como esto. Esto debe reiniciarse si se cambia el tamaño del wiewport mientras la ventana emergente está abierta.

function tb_position() { 
 

 
if(TB_WIDTH > $(window).width()) 
 
{ 
 
\t $("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'}); 
 
\t $("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'}); 
 
\t $("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'}); 
 
} 
 
else 
 
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH/2),10) + 'px', width: TB_WIDTH + 'px'}); 
 
}

Answer 5

Usted tiene que incluir esto dentro de una setTimeout para que esto se hará después de abrir la thickbox, no cuando el botón está clic. Por lo general, ocurre entre "Hacer clic en el botón" y "Abrir la caja gruesa".

var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(), 
 
    TB_HEIGHT = 400; // set the new width and height dimensions here.. 
 

 
setTimeout(function() { 
 
    jQuery("#TB_window").css({ 
 
    marginLeft: '-' + parseInt((TB_WIDTH/2), 10) + 'px', 
 
    width: TB_WIDTH + 'px', 
 
    height: TB_HEIGHT + 'px', 
 
    marginTop: '-' + parseInt((TB_HEIGHT/2), 10) + 'px' 
 
    }); 
 
}, 0);