Question

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

这个叠加层看起来很好用。直到用户决定放大浏览器。当浏览器缩放时，因为叠加层使用position：fixed它不会滚动，用户也无法访问或看到提交按钮。

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

Answer 1

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

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

修改

Here is a fiddle适用于缩放浏览器以及调整窗口大小。

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将允许您选择元素的堆叠顺序，这可能会解决您的问题。

用户浏览器缩放时如何处理叠加

2 个答案: