Resizing JQuery thickbox window dynamically

I have a thickbox that pop开发者_运维技巧s up when you click on a link. Depending on the user's browser size I want the thickbox to be a constant 500px or so width and the height to change dynamically depending on the height of user's browser. Is this possible?

In my case : (CSS only)

#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;
}

another option is to use JQuery to work out the browser size and then resize thickbox to suit. this is not as elegant as the CSS solution but just to complete the answer... here is a method do get it done.

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

You can adjust the css to make the height change dynamically. Something like this should work:

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

Tested answer using just 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%;
    }
}