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

Question

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

我怎样才能做到这一点？

我的旧代码如下所示，

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

Answer 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"
});

许多变量分配可能会被删除，但为了清楚起见，将它们保留下来。