Hola, pongo primero el código que tengo y luego expongo la duda:
El estile para el div es el siguiente:
Código:
<style type="text/css">
/*<![CDATA[*/
div#opaca {
position: fixed;
width: 100%;
height:100%;
color: #FFF;
top:0px;
left:0px;
text-align: center;
padding-top: 200px;
z-index: 998;
overflow:hidden;
font-size: 1.1em;
}
.prueba {
color: #FFF;
}
h1.atras {
margin-left: 300px;
margin-top: 300px;
font-size: 4em;
}
div#popup {
width: 500px;
height: 300px;
border: solid 2px #D99837;
margin: 0 auto;
z-index: 999;
position: relative;
}
</style>
Tengo el siguiente script:
Código:
<script type="text/javascript">
num=0;
function crear(obj) {
num++;
fi = document.getElementById('fiel'); // 1
contenedor = document.createElement('div'); // 2
contenedor.id = 'opaca'
fi.appendChild(contenedor);
ele = document.createElement('div'); // 5
ele.id = 'popup'
contenedor.appendChild(ele); // 7
ele2 = document.createElement('img')
ele2.src = "images/image1_big.jpg"
ele2.onclick = function () {borrar(this.name)}
ele.appendChild(ele2);
}
function borrar(obj) {
fi = document.getElementById('fiel'); // 1
fi.removeChild(document.getElementById(obj)); // 10
}
</script>
La idea es que se cree dinámicamente lo siguiente:
Código:
<div id="opaca"><!-- capa pantalla completa
<div id="popup">
<img src="images/image1.jpg" width="500px" height="300px">
</div>
</div>
Al pulsar en una imagen que está dispuesta de la siguiente manera:
Código:
<a href="#" onclick="crear(this)">
<img src="images/image1.jpg">
</a>
Tengo una tira de imágenes y lo que quiero es que al pinchar en mi imagen aparezca en medio de la página la misma imagen que ha pulsado pero en grande pero sin usar ventanas emergentes, quiero que aparezca en la misma página donde se encuente.
Habia pensado en crear un div, con las propiedades del style que he puesto arriba y que ese div ocupase la pantalla entera mostrando en el centro la imagen y que al pulsar la imagen grande se cerrase.
Pero no consigo que funcione.
Alguien puede echarme una mano?
Gracias!