模态窗口隐藏在标题后面？

Question

因此，我已经为我的bigcartel网站添加了一个名为“Reveal”的模式窗口jQuery插件，该窗口已添加到我的bigcartel网站（尚未完成，所以请不要尝试购买任何东西，按钮打开以进行测试）如果您向上滚动至少一点点或一直向上，并单击“SIZE GUIDE”按钮，模式窗口会弹出并隐藏在标题后面。< / p>

如果您要向下滚动并单击“SIZE GUIDE”按钮，模式窗口也会隐藏在“您可能也喜欢......”部分后面。 换句话说，模态窗口只喜欢显示在“灰色背景”区域中。

我尝试过z-index属性，但没有任何效果。

单独使用模态窗口的模态窗口CSS如下所示：

.reveal-modal {
    visibility: hidden;
    top: -200px; 
    left: 50%;
    margin-left: -320px;
    width: 585px;
    background: #fff url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

这是我得到Reveal模态窗口的地方： http://zurb.com/playground/reveal-modal-plugin

总结一下，我的整体问题是，如何在不仅仅是灰色背景区域弹出模态框，而是显示在标题上并且“你可能也喜欢......”部分？因为它们目前隐藏在标题后面（如果向下滚动得足够远并点击“SIZE GUIDE”按钮），“你可能也喜欢......”部分。

Answer 1

你的问题似乎是这里的声明：

div#content.strip {
    overflow: hidden;
}

内容包含模态，因此隐藏了“溢出”。如果您无法删除或重新处理该样式，则可能需要将模式移到内容包装器之外。

Answer 2

我认为你的意思（希望是）模型框定位到屏幕的一部分，并且在滚动时不会停留在用户屏幕前面？

如果是这样的话，请尝试：

.reveal-modal {
visibility: hidden;
top: -200px; 
left: 50%;
margin-left: -320px;
width: 585px;
background: #fff url(modal-gloss.png) no-repeat -200px -80px;
position: fixed;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}