Динамически изменяйте размер всплывающего окна

Question

Я использую ThickBox, чтобы открыть всплывающее окно на моей странице. Во всплывающем окне есть вкладка, по которой мне нужно изменить размер всплывающего окна ThickBox. Как я могу это сделать?

Заранее спасибо.

Answer 1

Это код, который они используют

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

, чтобы вы могли использовать то же самое с небольшим изменением ( при условии, что вы используете современную версию 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'
    });
});

Демо на http://jsfiddle.net/gaby/rrH8q/

Answer 2

Вы должны заключить это в setTimeout, чтобы это было сделано после того, как толстый ящик открыт, а не когда кнопка нажата. Обычно это происходит между «щелчком по кнопке» и «открытием толстого ящика».

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

Answer 3

Я сделал что-то подобное. Это необходимо перезапустить, если размер окна просмотра изменен во время открытия всплывающего окна.

function tb_position() {

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

Answer 4

Небольшое исправление в Gaby aka G. Petrioli's answer , чтобы всплывающее окно также правильно устанавливало поля:

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 5

Присоедините обработчик события щелчка к указанной вкладке, который изменяет размеры TB_Window и поля для его повторного центрирования, например,

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