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

Question

所以我已经为我添加到我的 bigcartel 网站的“尺寸指南”窗口实现了一个名为“Reveal”的模态窗口 jQ​​uery 插件 （它还没有完成，所以请不要尝试购买任何东西，按钮为测试目的而打开） 如果您向上滚动至少一点点或一直向上滚动，然后单击“尺寸指南”按钮，模式窗口会弹出并隐藏在标题后面。

如果您向下滚动足够多并单击“尺寸指南”按钮，模态窗口也会隐藏在“您可能还喜欢...”部分的后面。 换句话说，模态窗口只喜欢显示在“灰色背景”区域。

我尝试了 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);
    }

这里是显示模式窗口： http://zurb.com/playground/reveal-modal-plugin

总而言之，我的总体问题是，如何让模态框不仅在灰色背景区域弹出，而且显示在标题和“您可能还喜欢...”部分？因为它们当前隐藏在标题后面并且（如果您向下滚动足够远并单击“尺寸指南”按钮）“您可能还喜欢...”部分。

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);
}