使用 jquery css(3) 和 HTML(5) 制作覆盖窗口答案

【问题标题】：Making an overlay window with jquery css(3) and HTML(5)使用 jquery css(3) 和 HTML(5) 制作覆盖窗口
【发布时间】：2011-06-10 17:54:49
【问题描述】：

我希望在我的网站上创建一个覆盖效果（模态）类型的效果，我已经有一个工作的固定宽度和高度，但我希望它填充 85% 的可用屏幕空间？

我怎样才能做到这一点？

我的旧代码是这样的，

$('#overlay').fadeIn('fast');
            $('#lightbox').css({
                    position:'fixed',
                    left: ($(window).width() - $('#lightbox').outerWidth())/2,
                    top: ($(window).height() - $('#lightbox').outerHeight())/2
            });

【问题讨论】：

标签： javascript jquery css dom-manipulation

【解决方案1】：

您希望叠加层填充 85% 的屏幕空间？然后您需要为此计算所需的宽度/高度和 x/y 坐标。

var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);   
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2;

$('#overlay').width(targetWidth);
$('#overlay').height(targetHeight);
$('#overlay').css({
    "position": "absolute", 
    "top": targetY+"px", 
    "left": targetX+"px"
});

很多变量赋值可能会被删掉，但为了清楚起见，留下它们。

【讨论】：

非常感谢，如果窗口被调整大小，有没有办法重新计算宽度？
将它包装在一个函数中并在 $(window).resize() 上调用它 - 如果您发现它解决了您的问题，请接受我的回答:)