animatedModal.js的对话框使链接无法点击（即使它有z-index：-9999）

Question

我正在使用animatedModal.js来获取一些简单的对话框。 一切都像魅力一样，但我不能点击我页面顶部的我的标识上的链接，因为模式与

opacity:0;
z-index:-9999;

就在它面前。它落后于所有其他东西，不透明度为0，就像它应该的那样，但不知何故它仍然是在徽标的前面。徽标得到z-index:100，但隐形模态仍然在它前面。

因为我找不到animatedModal.js的在线版本（比如cdnjs.com或smth），我不能做一个小提琴，但你可以在这里查看我的网页：

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

Answer 1

问题很简单。你正在失去z-index的轨迹。我没有设置z-index的所有位置，但我发现这两个是至关重要的：

• 您的标记（class = logo）的z-index为100
• 您的div标签（class = content）的z-index为200

因此，浏览器会明白您始终希望您的内容高于您的标记。所以，请记住这一点，让我们看看你如何为模态设置z-index。

• 您的模态的z-index为-9999，相对于其父级（内容）=＆gt;这意味着它实际上有z-index为200。（ - 9999）。

这意味着无论你在徽标上有什么z-index，它总是低于你的模态：

TL; DR： 修复程序将内容z-index设置为低于标记。或者重新组织您的DOM，因为模态不需要在呼叫链接旁边。如果您选择第二个，则设置标签z-index可能会启动。