Recently, I was given the task of replicating a JavaScript popup that our former web developer created. While I've managed to make it very similar, there is one thing I'm struggling with - getting the close button (X) to float over the popup in the top right corner rather than being positioned directly on the top right corner of the popup itself. I've experimented with various position: values in the CSS and tried different attributes from Stack Overflow, but nothing seems to work as desired.
Here is the CSS code:
#popup {
position: absolute;
display: hidden;
top: 50%;
left: 50%;
width: 400px;
height: 586px;
margin-top: -263px;
margin-left: -200px;
background-color: #fff;
z-index: 2;
padding: 5px;
}
#overlay-back {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=60);
z-index: 1;
display: none;
}
.close-image {
display: block;
float: right;
cursor: pointer;
z-index: 3;
}
And here is the HTML code:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>