html - 在视差滚动布局上使用模态框时隐藏叠加层

Question

我正在设计一个同时使用视差滚动和模式框的网站。当您打开其中一个模态框时，我使用 jQuery 和 CSS 向弹出窗口的 DIV 元素添加一个类，使其不透明度从 0 变为 100；我正在使用过渡使它看起来很漂亮。当您关闭该框时，jQuery 会剥离该类以将不透明度设置回 0。

为了使模式框更具可读性，我在它们后面放置了一个覆盖层(实际上是一个包含 DIV)，使用 100% 的宽度和高度覆盖屏幕其余部分的透明度。当盒子打开时，我还使用相同的技巧将其不透明度从 0 设置为 100，当它关闭时反之亦然。

问题在于，即使不透明度为 0，叠加层仍然在屏幕的某些“上方”，呈现链接和文本可见但不可选择。当要隐藏叠加层时，我尝试将 Z-Index 设置为 0 和 -1，但是因为视差滚动(我使用的是自定义版本的 SCRN 模板，供引用 http://rodrigob.com/themes/scrn/ )使用 Relative，固定和绝对定位，Z-Index只适用于部分站点。

作为一种变通方法，使用 Visibility:Hidden 对叠加层进行样式设置(与 Display:None 一样，但出于可访问性原因我想避免这种情况)，但这不能通过转换来管理，因此当模式关闭时，它只是消失了，而不是很好地淡出。

有什么办法解决这个问题吗？我认为在不透明度从 100 到 0 的过渡发生后将可见性设置为隐藏会起作用，但我不知道该怎么做，如果它完全可以做到的话。

提前致谢。

Answer 1

在叠加层上设置“不透明度:100”或“可见性:隐藏”实际上并不是移除叠加层。您要做的是删除该元素。

从概念上讲，叠加层仍然存在。它就像您内容上方的玻璃，您可以看到但无法触摸，不可见的覆盖玻璃仍然存在。就像用windex清洗过的超透明玻璃窗那个人是试图点击叠加层下方的那些链接的用户。

您想要做的是从 DOM 中删除该元素，或者在转换后将其设置为“display: none”。

我会使用的跨浏览器的最佳解决方案是在动画之后设置 display: none。

$(".overlay").animate({"opacity": "0"}, function(){
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
});

就我个人而言，我喜欢将我的模态包装在一个容器中，并给它一个固定的位置，然后将容器连同隐藏的模态内容一起移除，但我就是这样。

我也喜欢 jeffery 的花式 css 过渡结束方法，如果你想喜欢 css3，但需要注意的是你可能必须检测你必须听哪个供应商前缀。

以下是带有供应商前缀的转换结束:

var transitionEnd = {
  'WebkitTransition' : 'webkitTransitionEnd'
  ,  'MozTransition'    : 'transitionend'
  ,  'OTransition'      : 'oTransitionEnd'
  ,  'msTransition'     : 'transitionend'
  ,  'transition'       : 'transitionend'
}

您必须编写一些内容来检测哪个与用户相关。

$(".overlay").on(transitionEnd, function() {
    $(this).hide();
    // OR REMOVE it
    // $(this).remove();
}