Изменение размера окна JQuery Thickbox динамически

Question

У меня есть толстая коробка, которая появляется при нажатии на ссылку. В зависимости от размера браузера пользователя, я хочу, чтобы толщина коробки была постоянной шириной около 500 пикселей, а высота динамически изменялась в зависимости от высоты браузера пользователя. Возможно ли это?

Answer 1

другой вариант - использовать JQuery для определения размера браузера, а затем изменить его размер в соответствии с размерами.это не так элегантно, как решение CSS, но просто для завершения ответа ... вот метод, чтобы сделать это.

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

Answer 2

В моем случае: (только CSS)

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

Answer 3

Проверенный ответ с использованием только 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%;
    }
}

Answer 4

Вы можете настроить CSS для динамического изменения высоты. Примерно так должно работать:

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