jquery - 如何使图片在点击时覆盖网站？

Question

Newby 问题在这里:当您点击图片时，您将如何做到这一点，它会展开(不是整个网站)并以网站为中心，并具有透明背景，让您可以看到您所在的页面？ (然后单击黑色透明区域时返回“背景”页面)有点像当您单击相册中的图像时在 facebook 中发生的情况。

我尝试用 CSS 来做，因为我无法用 JS 来做，用这个:

    figcaption {
    font-size: 12px;
    text-align: center;
    display: block;
    background-color: white;
    font-weight: 500;
    }
    figure:hover {
    -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    }

    figure:focus {
    outline: none;
    -webkit-transform: scale(5); -moz-transform: scale(5);
    -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
    z-index: 9999;
    }

但这仍然不是我想要做的。

fiddle :http://jsfiddle.net/seanh99/ubJLU/

这是我尝试建立的第一个网站，如有任何提示/更正，我们将不胜感激!

Answer 1

您似乎正在尝试为图像创建一个“灯箱”。最好的选择可能是为此使用现有的 jQuery 插件。

两个例子是:

1. ( http://fancyapps.com/fancybox/ )
2. ( http://lokeshdhakar.com/projects/lightbox2/ )

您需要在代码中包含 jQuery 才能使它们正常工作。