Javascript 基础5 Pinterest型模态POPOLF

我正在尝试复制Pinterest master/details样式：

单击缩略图时，将显示包含详细信息的全屏模式。带有缩略图的母版页现在不再可滚动，而是模式详细视图可滚动

我使用纯css将我的主内容和详细内容放在两个容器中，如下所示：

#master {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: scroll;
}

#detail {
            background-color: rgba(248,249, 249, 0.5);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: scroll;   
            visibility: hidden;       
            z-index: 100;      
}

我使用JS在单击缩略图时显示细节视图

这里有一把小提琴来展示我所寻找的东西，显然我想用《基础》中的《大师与细节》的内容来复制它：

当我把基础div放在这两个容器中时，它们就被忽略了。有人知道如何使用基金会来实现这个吗？< /P> 问候,，

---

Olav

< P>好的，所以我只是用小提琴+基础的内容做了另一个测试，结果证明它实际上是按预期工作的。很抱歉给花时间在这上面的人带来不便。我将把这个留给任何想找类似的东西的人。

你为什么要把绝对位置放在后面！重要职位确定了吗？Html或更好的JSFIDLE页面将帮助我们，帮助您：