2

因此，我为我添加到我的 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

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

4

2 回答 2

2

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

div#content.strip {
    overflow: hidden;
}

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

于 2013-09-28T22:46:14.997 回答
0

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

如果是这种情况，试试这个：

.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);
}
于 2013-09-28T22:43:33.127 回答