CODEWITHSUNDEEP
csspopup
useruser5000
useruser5000

Reputation: 25

Position of close button on CSS pop up

I have a thumbnail image you can click to open a full size image as a pop up div.

I want the close button for that pop up to be in the top right corner on the border but not on the image itself. I've attached a screenshot example from another site of what I am trying to do, as well as an example of what mine looks like.

What I want:

enter image description here

What I have:

enter image description here

Here is my 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>

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

How can I move the close button so that it is on the border and not causing that extra white space due to the button image height?

Upvotes: 2

Views: 18626

Answers (2)

SVS
SVS

Reputation: 4275

Here is the working 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;}

​

Upvotes: 4

Jon P
Jon P

Reputation: 19772

Don't re-invent the wheel. The screenshot you provided looks a lot like fancy box. A jquery plug in. Use that instead. You will save your self cross browser headaches using this or one of the mainy other similar jQuery plugins.

Upvotes: 4

Related Questions