[SOLUCIONADO] Definir backgroundcolor en ventana emergente.

Profesor_Lambetain · #1 (**permalink**) 14/03/2013, 00:11

Hola al foro:

Estoy creando una nueva ventana emergente con el siguiente código (transcribo sólo la parte que creo importa, ya que el código tiene más de 2000 líneas):

Código HTML:

...
if(document.forms[0].elements[10].value==1){ // Desactivación del Fotoshow (se dió a "Fotoshow OFF").
	document.forms[0].elements[10].value=0;
	document.images[1].src="FotoshowON.jpg";
	fotogrande.close();
} else if(document.forms[0].elements[10].value==0){ // Activación del Fotoshow (se dió a "Fotoshow ON").
	document.forms[0].elements[10].value=1;
	document.images[1].src="FotoshowOFF.jpg";
	m=document.forms[0].elements[4].value;
	p=document.forms[0].elements[6].value;	
	imagename=String(m)+"-"+String(p)+".jpg";
	[B]fotogrande=window.open(imagename,"_blank","width=750,height=470,top=160,left=555,toolbar=yes,menubar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes,fullscreen=no");[/B]	
}
...

El código me funciona bien. Hace lo siguiente: abre una nueva ventana para presentar una foto de nombre "imagename".

Ahora, esa ventana abre con fondo blanco en I.E.9, Chrome y Opera, y en gris oscuro (al parecer por defecto) en Firefox. Y lo que necesito es poder definir el backgroundcolor de esas ventanas emergentes como NEGRO. Y realmente he probado con todo lo que se me ocurrió durante días y no he podido encontrar la manera.

¿Algún alma piadosa que pueda echar luz sobre este novato?

Gracias mil.

Profesor_Lambetain · #2 (**permalink**) 14/03/2013, 11:22

Bueno, con el siguiente código pude:
(1) colorear el fondo del pop-up (en negro, en mi caso, que es lo que inicialmente buscaba),
(2) Centrar la imagen horizontalmente en el pop-up (verticalmente me fue imposible... de momento),
(3) Accesoriamente, mostrar la foto íntegramente en el pop-up de dimensiones fijas, ocupando la mayor superficie libre posible del pop-up, sin tener necesidad de recurrir a barras de desplazamiento (aunque el pop-up se define con barras); tener en cuenta que en este pop-up se visualizan más de 100 fotos, todas de diferentes ancho (px) x alto (px), y si se permite al pop-up variar sus dimensiones, el usuario puede acabar con fatiga visual.

Código HTML:

/* Lanzado de pop-up de foto ampliada en caso de que esté el "Fotoshow ON" activado (campo [10] de formulario=1). Las variables alto y ancho son las dimensiones reales (px) de cada foto */
if(document.forms[0].elements[10].value==0){
	fotogrande.close();
} else if (document.forms[0].elements[10].value==1) {
	fotogrande.close();
	fotogrande=window.open("","fotogrande","width=767,height=463,top=167,left=552 ,toolbar=yes,menubar=no,location=no,directories=no,scrollbars=yes,status=yes,resizable=yes,fullscreen=no");	
	fotogrande.document.write('<html><head></head><body style="background-color:#000000"><div style="text-align:center"><img src="" /></div></body></html>');
	anchoneto=752;
	altoneto=450;
	relacpop=anchoneto/altoneto;
	if (ancho/alto >= relacpop && ancho <= anchoneto) {
		fotogrande.document.images[0].width=anchoneto;
		fotogrande.document.images[0].height=Math.floor(anchoneto*alto/ancho);
	} else if (ancho/alto <= relacpop && alto <= altoneto) {
	fotogrande.document.images[0].width=Math.floor(altoneto*ancho/alto);
	fotogrande.document.images[0].height=altoneto;
	} else if (ancho >= anchoneto && ancho/alto >= relacpop) {
		fotogrande.document.images[0].width=anchoneto;
		fotogrande.document.images[0].height=Math.floor(anchoneto*alto/ancho);
	} else if (alto >= altoneto && ancho/alto <= relacpop) {
		fotogrande.document.images[0].width=Math.floor(altoneto*ancho/alto);
		fotogrande.document.images[0].height=altoneto;
	}
	fotogrande.document.images[0].src=imagename;
}