jquery - 如何在 jQuery 中创建一个将在内容底部结束或在内容不适合时显示滚动条的灯箱窗口？

Question

我需要使用 jQuery 创建一个灯箱窗口， 没有任何插件。叠加层需要与位于页面内的内容一起显示。

如果浏览器的窗口不够高，无法容纳内容，有人能给我一些指示，让滚动条出现在内容的定义部分吗？它还需要调整它的大小，以防页面加载时窗口足够高，然后如果用户缩小窗口，则垂直滚动条将出现在内容的定义部分周围。

灯箱应始终显示在距页面顶部 100 像素的位置。如果内容不是那么高，那么灯箱的底部应该在内容结束的地方结束。如果内容很高，无法全部显示在窗口底部，则应在灯箱内容的指定部分出现滚动条。

这必须在 IE7+ 中工作。

Answer 1

这是为您指定的 100px margin-top 设计的，以及元素底部最高处和窗口底部之间的 100px margin。调整窗口大小时，如果窗口高度大于先前压扁的灯箱的高度(此时，其高度将设置为“自动”)，该函数将迭代两次，但最终会比松弛高度短新展开的灯箱(在这种情况下，我们需要再次挤压灯箱以匹配新的窗口高度)。

<div id="myLightBox">
    <div id="myScrollPane">

        <!-- Content here -->

    </div>
</div>
<script type="text/javascript">
function resizeLightBox(i)
{
    if (window.innerHeight < $('#myLightbox').height() + 200)
    {
        var newHeight = (window.innerHeight - 200) + 'px';
        $('#myLightBox').css('height', newHeight);
        $('#myScrollPane').css('height', newHeight);
        $('#myScrollPane').css('overflow-y', 'scroll');
    }
    else
    {
        $('#myLightBox').css('height', 'auto');
        $('#myScrollPane').css('height', 'auto');
        $('#myScrollPane').css('overflow-y', 'visible');
    }
    if (i > 0)
    {
        i--;
        resizeLightBox(i);
    }
}

window.onload = function(){resizeLightBox(1)};
window.onresize = function(){resizeLightBox(2)};
</script>