点击链接后，如何在页面中显示一个框？

Question

我想要一个图像，当按下该图像时，会显示从屏幕左侧到背景图像中的一个点的另一个图像。然后我想放大该图像并制作一个模态框apear。我怎么能这样做？

背景中的要点需要保持不变。当我调整浏览器大小时，它需要出现在同一点上。

Answer 1

See a working demo of the following code here.

问题的第一部分可以使用position:absolute容纳您背景图片的position:relative容器来解决。

#wrapper {
    overflow-x:hidden;
    width:100%;
    position:relative;
}
#absSlide {
    width:100px;
    position:absolute; top:200px; right:-100px;
}

确保wrapper与窗口一样宽，overflow-x:hidden，以便在点击前看不到div中的幻灯片。幻灯片放置位于右侧的舞台和top:XXXpx，其中XXX是距离背景元素所在页面顶部的距离。你的jQuery看起来像是在点击隐藏div中的动画：

$('#showSlide').click(function(e){
    e.preventDefault();
    $('#absSlide').animate({'right':0},450);
});

您应该能够修改此代码，使其在左侧工作，并在jQuery中为left属性设置动画。我不想让它变得太容易，因为你的问题很普遍。在分享了第一部分可以实现的工作代码后，您应该针对问题的其余部分提出单独的问题。