texto - Posición del botón Cerrar en CSS emergente

estilos tablas html css ejemplos

Question

Tengo una imagen en miniatura en la que puede hacer clic para abrir una imagen de tamaño completo como una ventana emergente.

Quiero que el botón de cierre de esa ventana emergente esté en la esquina superior derecha del borde, pero no en la imagen misma. He adjuntado un ejemplo de captura de pantalla de otro sitio de lo que estoy tratando de hacer, así como un ejemplo de cómo se ve el mío.

Lo que quiero:

Lo que tengo:

Aquí está mi 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>

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

¿Cómo puedo mover el botón de cierre para que esté en el borde y no cause ese espacio en blanco adicional debido a la altura de la imagen del botón?

Answer 1

Aquí está el violín de trabajo

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

1.

Answer 2

No reinventar la rueda. La captura de pantalla que proporcionó se parece mucho a una caja elegante . Un enchufe de jquery . Úselo en su lugar. Guardará sus dolores de cabeza de navegador cruzados utilizando este o uno de los principales complementos jQuery similares.