Zmieniaj dynamicznie rozmiar wyskakującego popupbox

Question

Używam ThickBox do otwierania wyskakujących okienek na mojej stronie. W wyskakującym okienku znajduje się zakładka, na której muszę zmienić rozmiar okna wyskakującego ThickBox. Jak mogę to zrobić ?

Z góry dziękuję.

Answer 1

Jest to kod używają

$("#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'}); 
    } 

dzięki czemu można używać tak samo z niewielką zmianą (zakładając użyć nowoczesną wersję 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' 
    }); 
}); 

Demo pod http://jsfiddle.net/gaby/rrH8q/

Answer 2

Dołącz obsługę zdarzeń kliknięcia do wspomnianej karty, która zmienia wymiary i marginesy TB_Window, aby ponownie je wyśrodkować, np.

$("#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

Mała korekta w Gaby aka G. Petrioli za odpowiedź tak, że okienko powinno ustawić marginesy także poprawnie:

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

zrobiłem coś takiego. To musi zostać ponownie uruchomione, jeśli rozmiar wiewportu zostanie zmieniony, gdy popup jest otwarty.

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

Trzeba ująć to wewnątrz setTimeout tak, że zostanie to zrobione po thickbox jest otwarty, gdy przycisk nie jest kliknięcie. Zwykle dzieje się to pomiędzy "Kliknięciem przycisku" i "otwarciem grubej skrzynki".

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);