Javascript 主干视图未隐藏父视图的事件

我的主干应用程序显示一个项目网格，当单击其中一个项目时，一个“详细信息”主干视图被添加到DOM中（就在网格“div”之后）

“details”视图用“shadow”隐藏所有内容，用css变换变换父网格视图，并在其中以div显示细节

我使用css类隐藏所有内容，如下所示：

.itemDetails {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    padding-top: 140px;
}

我想我写的结果叫做“灯箱”。 它工作得很好，但问题是，我仍然可以单击阴影后面的一些网格项目（主要是网格中稍后的项目）。 我应该使用“this.undelegateEvents（）；”吗？还有什么我没想过的吗

---

基本上，我只想“冻结”（也就是说悬停效果不起作用）父视图（直到单击“x”-它已经起作用了）。谢谢我想你想要的是一个模式窗口。链接： 和

简言之，模态窗口是您描述过但未命名的窗口-一个从视图中遮挡所有父窗口的子窗口，必须先解决该问题，然后才能再次与父窗口交互

---

我可能弄错了，但如果我是对的，模态窗口解决方案比其他一些选项简单得多。

如果是“父”视图，我不确定术语。“详细信息”视图只是另一个视图，它被初始化并添加到DOM中，在“网格”视图中的“单击”事件回调中。听起来你想要一个UI拦截器，它位于你的lightbox下面，但在页面的其余部分之上，它会吃掉事件，而不去管其他任何事情。谷歌搜索“jquery block ui”，你应该看到一些可以学习的例子。我认为你只需要设置z索引，使其高于你的网格，从而阻止下面的元素。它不是z索引。它看起来已经很好了，只是表现不好。。。谢谢。只有前六个网格项事件按预期“停止”，最后一个继续工作。奇怪。。。