动态调整 JQuery 厚框窗口的大小答案

【问题标题】：Resizing JQuery thickbox window dynamically动态调整 JQuery 厚框窗口的大小
【发布时间】：2010-11-30 23:10:21
【问题描述】：

我有一个厚框，当您单击链接时会弹出。根据用户的浏览器大小，我希望厚框是一个恒定的 500 像素左右的宽度，并且高度根据用户浏览器的高度动态变化。这可能吗？

【问题讨论】：

【解决方案1】：

就我而言：（仅限 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;
}

【讨论】：

这对我有用！仅在厚框内滚动的一个问题被禁用。这是修复：将 #TB_ajaxContent 中的高度从 auto 更改为 height: 90vh !important;

【解决方案2】：

另一种选择是使用 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
});

【讨论】：

【解决方案3】：

您可以调整 css 以使高度动态变化。像这样的东西应该可以工作：

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

【讨论】：

【解决方案4】：

仅使用 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%;
    }
}

【讨论】：