Javascript 弹出式背景未覆盖导航栏 解释

我在单击按钮时会显示此弹出窗口，但由于某些原因，当显示时，背景没有覆盖导航栏。我已经尝试更改z索引，但什么也没发生。它只会在没有动画的情况下覆盖导航栏

代码 您也可以在（）中看到它

var custom=function（）{
var handlePopup=函数（）{
var overlay=$（'.popup overlay'），
关闭=$（'.popup close'），
触发器=$（'.popup trigger'），
父项=$（'.popup container'）；
trigger.on（'click'，function（）{
$（this）.closest（'.popup container'）.addClass（'popup-overlay-show'）；
});
关闭。打开（'单击'，功能（e）{
e、 停止传播（）；
removeClass（'popup-overlay-show'）；
});
}
返回{
init:function（）{
handlePopup（）；
},
};
}();
$（文档）.ready（函数（）{
custom.init（）；
});
.navbar{
背景颜色：黄色；
}
.覆盖{
光标：指针；
}
.btn{
边缘顶部：100px；
}
.弹出式覆盖{
位置：固定；
排名：0；
左：0；
右：0；
宽度：100%；
身高：100%；
不透明度：0；
可见性：隐藏；
背景：rgba（0,0,0,0.55）；
}
.弹出叠加显示{
z指数：1；
}
.弹出覆盖显示.弹出覆盖显示{
不透明度：1；
能见度：可见；
z指数：2000！重要；
}
.弹出内容{
位置：绝对位置；
最高：50%；
左：0；
右：0；
宽度：600px；
高度：自动；
背景：#fff；
填充：35px；
保证金：0自动；
转换：translate3d（0，-50%，0）；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。

试试这个CSS

CSS

作为Iscmaro，您也可以使用来解决它，如下所示

您也可以在（）上看到它


.navbar{
背景颜色：黄色；
}
.btn{
边缘顶部：100px；
}
.垂直对齐辅助工具{
显示：表格；
身高：100%；
宽度：100%；
}
.垂直对齐中心{
显示：表格单元格；
垂直对齐：中间对齐；
}

打开
&时代；
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
发生这种情况是因为您使用了
transform:translate3d（0，-50%，0）将您移动到3个维度。当您移动到3D时，会创建一个新的堆叠顺序，您的z索引值将不起作用。当您应该使用bootstrap的模式时，为什么要使用自定义模式？使用引导模式应该可以解决所有问题。你可以随心所欲地设计一个模式。@Ihazkode我删除了这个
transform
代码，看看它是否有效，但仍然没有任何结果：（@Iscmaro好主意！！我会尝试调整这个模式（不是我做的）这个问题来自Animate.css类
fadeInUp
具有以下关键帧
@keyframes fadeInUp{0%{opacity:0；transform:translate3d（0100%，0）}到{opacity:1；transform:none}
，这就是如果删除动画，代码会工作的原因。
.navbar {
  background-color: yellow;
  z-index:10;
}

.popup-container{
  position: relative;
}

.popup-overlay-show {
    z-index: 16;
}