CSS上的关闭按钮位置弹出

Question

我有一个缩略图图像，您可以单击以打开一个完整大小的图像作为弹出div。

我希望弹出的关闭按钮位于边框的右上角，但不是图片本身。我附加了一个来自另一个网站的屏幕截图示例，以及我所看到的示例。

我想要什么：

我有什么：

这里是我的HTML：

<div id="blanket" style="display:none;"></div> 
    <div id="popUpDiv" style="display:none;"> 
     <a href="#" onclick="popup('popUpDiv')"><img src="images/close.png" align=right></a><img src="images/largeimg.jpg" width=551 height=750> 
    </div> 
    <h1><a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a></h1> 
</div> 

我的CSS：

#blanket { 
    background-color:#111; 
    opacity: 0.65; 
    position:absolute; 
    z-index: 9001; 
    top:0px; 
    left:0px; 
    width:100%; 
} 

#popUpDiv { 
    position:absolute; 
    background-color:white; 
    width:551px; 
    height:779px; 
border:10px solid white; 
    z-index: 9002; 
} 

如何移动关闭按钮使其位于边框上，并且由于按钮图像高度而不会导致多余的空白空间？

Answer 1

这里是工作fiddle

CSS

#blanket { 
    background-color:#111; 
    opacity: 0.65; 
    position:fixed; 
    z-index: 9001; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
} 

#popUpDiv { 
    position:relative; 
    background-color:white; 
    width:551px; 
    margin:10% auto 0 auto; 
    height:259px; 
border:10px solid white; 
    z-index: 9002; 

} 
.close{position:absolute; right:-25px; top:-25px;} 

Answer 2

不要重新发明车轮。你提供的截图看起来很像fancy box。 A jquery即插即用。你将使用这个或其他类似的jQuery插件之一来保存自己的跨浏览器头痛。