Question

我正在尝试在我的页面上实现模态窗口。想法是显示带有项目屏幕截图和代码示例的弹出窗口。现在我已经用屏幕截图实现了弹出窗口。似乎工作正常，除了有2个问题。

1）面具没有覆盖整个窗口。 2）一旦弹出窗口关闭，如果我再次点击屏幕截图没有刷新，则不显示掩码。

<div class="screenshot">
            <div class="case">
                <div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
                </div><!-- end thumb-->
            </div><!-- end case-->
        </div>

.js

Answer 1

以下DIV具有位置相对集。这意味着任何位置：它下面的绝对元素将相对于它的位置。

<div class="project" id="mobile"></div>

这是导致叠加层仅从该位置延伸的原因。

第二次点击问题是由于#mask被淡出但没有像你在内容div上那样再次运行fadeIn。

另外，为了获得更好的响应，您应该选择部分代码并复制到JSfiddle中。然后，您可以询问有关叠加定位的非常具体的问题。

模态掩码不掩盖整个窗口

1 个答案: