有没有办法在 img 弹出到自己的窗口中后用 css 定位它？

Question

我正在寻找纯粹的CSS解决方案或一个非常短的Javascript解决方案为以下问题:

页面上有一个图像，你可以点击它，它会弹出自己的窗口。图像足够大，可以缩小到填充高度，但如果看到它在浏览器窗口的100%宽度，那就更好了。由于窗口实际上成为了一个自己的新页面，没有任何附加到先前样式的字符串，那么真正对其进行样式化的好方法是什么呢?

Answer 1

既然窗口真的变成了自己的新页面，没有任何附加到先前样式的字符串

如果当图像打开时，你希望之前的样式不受影响，可以使用"inherit" CSS属性。

例如，你的标记可以是这样的:

<div class="popupImage">
    <img src="foo.png" />
</div>

你的css可以是:

.popupImage {
    border-color: inherit;
    <other styles>: inherit;
}
.popupImage img {
    width: inherit;
    <other styles>: inherit;
}

你也可以动态地添加css类到图像容器，当图像被点击时覆盖样式:

$('img').click(function() {
    this.addClass('preventStyles');
});