2

我有一个缩略图图像,您可以单击以将全尺寸图像打开为弹出 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; 
}

如何移动关闭按钮,使其位于边框上,并且不会因按钮图像高度而导致额外的空白?

4

2 回答 2

4

不要重新发明轮子。您提供的屏幕截图看起来很像花哨的盒子。一个jquery插件。改用它。使用这个或其他主要的类似 jQuery 插件之一,您将节省您自己的跨浏览器头痛。

于 2012-07-30T06:32:36.527 回答
4

这是工作小提琴

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;}

​</p>

于 2012-07-30T06:44:23.277 回答