javascript - 缩放用户浏览器时如何处理覆盖

Question

我的网站上有一个叠加层，用户单击按钮时会激活该叠加层。

这个覆盖看起来和工作得很好。直到用户决定放大浏览器。当浏览器缩放时，因为覆盖使用位置：固定它不会滚动，用户也无法到达或看到提交按钮。

这对于一些视障用户来说是不可取的。有谁知道我如何能够即时检测到某些东西，并可能检测并重定向到静态页面上包含的表单。

Answer 1

缩放与调整窗口大小具有类似的效果，所以我认为（如果我错了，请纠正我）但您可以使用resize()事件来更新覆盖的宽度和高度。请参阅下面的示例。

$(window).resize(function(){
   $('#Overlay').css({
      height:window.innerHeight,
      width:window.innerWidth
   )};
});

编辑

这是一个适用于浏览器缩放和调整窗口大小的小提琴。

Answer 2

我不确定我是否完全理解这里的问题，你有一个覆盖，但是覆盖......正在覆盖一些东西，这似乎是一个问题？

好吧，无论如何，我通常会做这样的叠加：

.overlay {
    background-color: #777;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* This is important, maybe what you're after, the content you want 
       to show has to have a higher z-index than the overlay itself! */
    z-index: 99; 
}

z-index 将允许您选择元素的堆叠顺序，也许这会解决您的问题。