javascript - animatedModal.js 的对话框使链接不可点击(即使它有 z-index :-9999)

Question

我正在使用 animatedModal.js得到一些简单的对话框。一切正常，但我无法单击页面顶部 Logo 上的链接，因为模态带有

opacity:0;
z-index:-9999;

就在它的前面。它位于所有其他内容的后面，不透明度为 0，就像它应该的那样，但不知何故它仍然在 Logo 的前面。 Logo 得到了 z-index:100，但它前面仍然是不可见的模态框。

因为我找不到 animatedModal.js 的在线版本(比如 cdnjs.com 或 smth)，所以我无法制作 fiddle ，但你可以在这里查看我的网页:

• > The full site
• 和animatedModal.js在我的网站上

Answer 1

问题很简单。您正在丢失 z-index 的轨迹。我没有设置 z-index 的所有位置，但我发现这两个位置很重要:

• 您的 a 标签 (class=logo) 的 z-index 为 100
• 您的 div 标签 (class=content) 的 z-index 为 200

因此浏览器会理解您始终希望您的内容位于 a 标签之上。因此，记住这一点，让我们看看如何为模态设置 z-index。

• 您的模态框的 z-index 为 -9999，这是相对于其父项 (content) => 这意味着它实际上具有 z-index 为 200.(-9999)。

这意味着无论您在 Logo 上使用什么 z-index，它都将始终低于您的模态:

长话短说:解决方法是将内容 z-index 设置为低于您的 a 标签。或者重新组织您的 DOM，因为模式不需要位于调用链接的旁边。如果您选择第二个，设置一个标签 z-index 可能会起作用。