3

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

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

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

作为一种解决方法，使用 Visibility:Hidden 设置覆盖的样式（与 Display:None 一样，但出于可访问性的原因我想避免这种情况），但这不能通过转换来管理，所以当模式关闭时，它就会消失而不是很好地淡出。

有没有办法解决？我认为在从 100 不透明度过渡到 0之后将可见性设置为隐藏会起作用，但我不知道如何做到这一点，如果它甚至可以做到的话。

提前致谢。

4

6 回答 6

1

用于setTimeout在叠加层出现后启动动画，在动画结束后隐藏叠加层

显示覆盖：

// show the overlay (in whatever manner you like) BEFORE the animation starts
// opacity is 0
$('#overlay').show();
setTimeout(function() {
  // fade in the opacity AFTER the overlay is there
  $('#overlay').addClass('opaque');
}, 0);

隐藏覆盖：

// fade out the opacity BEFORE the overlay goes away
$('#overlay').removeClass('opaque');
setTimeout(function() {
  // hide the overlay (in whatever manner you like) AFTER the animation is done
  // opacity is 0
  $('#overlay').hide();
}, 250);
于 2013-01-15T15:31:00.557 回答
1

在叠加层上设置“不透明度：100”或“可见性：隐藏”实际上并没有删除叠加层。你想要做的是删除元素。

从概念上讲，覆盖仍然存在。它就像你的内容上方的玻璃，你可以看到但你不能触摸，隐形的覆盖玻璃仍然存在。这就像用windex清洗过的超透明玻璃窗 那个家伙是用户试图点击覆盖下方的那些链接。

您想要做的是从 DOM 中删除元素或在转换后将其设置为“显示：无”。

我将使用的跨浏览器的最佳解决方案是在动画之后设置 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();
}
于 2013-01-22T15:12:43.397 回答
0

我认为您可以使用 z-index，并且您无需寻找解决方法。您可能唯一需要的是将布局放在 DOM 树的更高位置。不看你的代码很难说，但如果你可以去类似的东西

<body>
    <div id="everyting-else">
       ...
    </div>
    <div id="overlay"/>
</body>

然后给#everyting-else 2 的z-index 和#overlay 1 的z-index，这应该适用于“everything-else”的内容，因为它们处于不同的堆叠上下文中。

是否在 div 内使用“相对、固定和绝对定位”都没关系

于 2013-01-21T21:36:21.693 回答
0

jQuery 的函数 animate 接受一个回调函数，该函数在动画完成时执行。例子：

$('.overlay').animate({
    opacity: 0
}, 300 /* animation duration in ms */, function () {
    // This will execute when the animation is complete
    $(this).css({
        visibility: 'hidden'
    });
});
于 2013-01-18T12:29:29.813 回答
0

您可以在不透明度转换之后侦听要设置的转换结束事件。visibility: hidden

于 2013-01-16T10:29:42.157 回答
0

仅opacity将元素放在无法定位的上下文中，z-index因为该元素必须与布局中的其他元素混合（W3C）。

进一步考虑的是，只有opacityor的元素visibility不会从布局流中提取，因此即使不可见，它们仍然占据其位置和大小，这将防止到达不可见元素下面的每个元素（禁止点击，按钮不可点击，等等）。

要解决您的问题，您需要设置display为none. 这样，元素将是不可见的，并且不再占用布局流中的空间。

于 2013-01-16T14:55:54.847 回答