Question

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

我怎样才能做到这一点？

我的旧代码看起来像这样，

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

Answer 1

您希望叠加层填满85％的屏幕空间吗？然后你需要计算所需的宽度/高度＆amp; 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"
});

很多变量赋值可能会被删除，但为了清晰起见，请将它们留下来。

用jquery css（3）和HTML（5）创建一个叠加窗口

1 个答案: