Cargar un div dinámicamente

[Blackerfin]

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!

[Blackerfin]

Bueno, por si a alguien le interesa al final he hecho algo como lo que queria pero bastante más sencillo. No obstante si alguien es capaz de decirme donde fallé en lo anterior pués lo agradezco, así aprendo.

Pongo como lo hice por si le fuera de utilidad a alguien:

En el HTML he puesto los siguientes trozos de código:

Dentro del Head:

Código:

<script type="text/javascript" src="js/popup.js"></script>

Dentro del Body:

Código:

<script type="text/javascript">
			var n = 9;
			var myArray = new Array(9);

			for (i=0; i<n; i++)
			{
				myArray[i] = new Popup();
			}

			

			function cerrarImagenes(){
				for (i=0; i<n; i++){
					Popup.objects[i].hide();
				}
			}

			mostrarImagen();

			function mostrarImagen(){
				for (i=0; i<n; i++){
					myArray[i].autoHide = false;
					myArray[i].content = '<a href="#" onclick="'+myArray[i].ref+'.hide();return false;"><img width=100% height=100% src="images/image'+(i+1)+'_big.jpg"></a>';
					myArray[i].width=500;
					myArray[i].height=375;
					myArray[i].style = {'border':'3px solid #D99837','backgroundColor':'yellow'};
				}			
			}

		</script>

También dentro del Body:

Código:

			<div id="dhtmlgoodies_slideshow" style="overflow:hidden">
	<div id="galleryContainer" style="overflow:hidden">
		<div id="arrow_left">
				<div id="arrow">
					<img src="images/arrow_left.png">
				</div>
		</div>
		<div id="arrow_right">
				<div id="arrow">
					<img src="images/arrow_right.png">
				</div>	
		</div>
		<div id="theImages">
				<!-- Thumbnails -->
					<a href="" onclick="cerrarImagenes();myArray[0].show();return false;"><img src="images/image1.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[1].show();return false;"><img src="images/image2.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[2].show();return false;"><img src="images/image3.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[3].show();return false;"><img src="images/image4.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[4].show();return false;"><img src="images/image5.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[5].show();return false;"><img src="images/image6.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[6].show();return false;"><img src="images/image7.jpg"></a>		
					<a href="" onclick="cerrarImagenes();myArray[7].show();return false;"><img src="images/image8.jpg"></a>		
				<!-- End thumbnails -->
				<div id="slideEnd"></div>
		</div>
	</div>
</div>

Popup.js lo saqué de otra web y como es bastante largo no me deja meterlo aquí. Con lo que pongo la referencia a la web de donde lo saqué:

[URL="http://www.javascripttoolbox.com/lib/popup/example.php"]http://www.javascripttoolbox.com/lib/popup/example.php[/URL]

Concretamente utilizé el que dice "Disabling Auto-Hide". Para sacar el .js como no ví de donde bajarlo le dí botón derecho del ratón->Ver código fuente de la página y miré la ruta de popup.js.

En fin, lo dicho.

Gracias a todos.

Bye.