2

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

“详细信息”视图使用“阴影”隐藏所有内容，使用 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” - 这已经有效）。谢谢

4

1 回答 1

1

我认为您想到的是模态窗口。链接：http ://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/ 和如何制作一个简单的模态窗口？.

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

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

于 2012-12-13T02:06:14.933 回答