Thay đổi kích thước cửa sổ bật lên dày tự động

Question

Tôi đang sử dụng ThickBox để mở cửa sổ bật lên trong trang của mình. Trong popup có một tab khi click vào đó tôi cần phải thay đổi kích thước của cửa sổ popup ThickBox. Làm thế nào tôi có thể làm điều đó ?

Xin cảm ơn trước.

Answer 1

Đây là mã họ sử dụng

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

để bạn có thể sử dụng cùng với một thay đổi nhỏ (giả sử bạn sử dụng một phiên bản hiện đại của 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' 
    }); 
}); 

Bản trình diễn tại http://jsfiddle.net/gaby/rrH8q/

Answer 2

Đính kèm trình xử lý sự kiện nhấp chuột vào tab đã nói để thay đổi kích thước và lề của TB_Window để căn giữa lại, ví dụ:

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

Chỉnh sửa một chút trong Gaby aka của G. Petrioli câu trả lời để bật lên nên đặt bên lề cũng đúng:

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

tôi đã làm một cái gì đó như thế này. Điều này cần được khởi chạy lại nếu wiewport được thay đổi kích cỡ trong khi cửa sổ bật lên mở.

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

Bạn phải gửi kèm theo này bên trong một setTimeout để điều này sẽ được thực hiện sau khi thickbox được mở ra, không phải khi nút là nhấp chuột. Thông thường, nó xảy ra ở giữa "Nhấp vào nút" và "mở hộp đựng".

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