transparencia en un div emergente

pabloe9k · #1 (**permalink**) 19/04/2009, 21:44

Hola, gente linda!
Abro este nuevo tema porque por algún motivo desapareció el original. No me queda más remedio que abrir uno nuevo con mi última consulta al respecto.

Panino5001 me dio una mano enorme con este código, pero me quedó una última duda que no puedo resolver.

Me pasaron este código, con el cual me aparecen en pantalla dos cuadros amarillos con un pequeño texto, uno de ellos transparentes y el otro no:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script>
function set_opacity(div, val) {
            div.style.opacity = val;
            div.style.MozOpacity = val;
            div.style.KhtmlOpacity = val;
            div.style.filter = 'alpha(opacity=' + val*100 + ')';
            div.style.zoom=1;
}
onload=function(){set_opacity(document.getElementById('miDiv1'),.5);}
//.5 o el valor de opacidad que necesites de 0 a 1}
</script>
</head>

<body>
<div id="miDiv2" style="border:medium solid; width:150px; height:123px; position:absolute; top:0; left:130px; background-color:yellow;">Sin Opacidad</div>
<div id="miDiv1" style="border:medium solid; width:150px; height:123px; position:absolute; top:222px; left:130px; background-color:yellow;"></div><div style="position:absolute; top:224px; left:134px;">Con Opacidad</div>
</body>

Ahora, quise agregar nuevamente la misma función (con otro nombre) para que los dos cuadros 'miDiv1' y 'miDiv2' sean transparentes, pero no funciona. Sólo en uno lo hace.

Este código usé:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<script>
function set_opacity(div, val) {
            div.style.opacity = val;
            div.style.MozOpacity = val;
            div.style.KhtmlOpacity = val;
            div.style.filter = 'alpha(opacity=' + val*100 + ')';
            div.style.zoom=1;
}
onload=function(){set_opacity(document.getElementById('miDiv1'),.5);}
//.5 o el valor de opacidad que necesites de 0 a 1}
</script>

<script>
function set_opacity2(div, val) {
            div.style.opacity = val;
            div.style.MozOpacity = val;
            div.style.KhtmlOpacity = val;
            div.style.filter = 'alpha(opacity=' + val*100 + ')';
            div.style.zoom=1;
}
onload=function(){set_opacity(document.getElementById('miDiv2'),.5);}
//.5 o el valor de opacidad que necesites de 0 a 1}
</script>
</head>

<body>

<div id="miDiv2" style="border:medium solid; width:150px; height:123px; position:absolute; top:0; left:130px; background-color:yellow;">Opacidad</div>

<div id="miDiv1" style="border:medium solid; width:150px; height:123px; position:absolute; top:222px; left:130px; background-color:yellow;">Opacidad</div>

</body>

A alguien se le ocurre por qué no está funcionando el código?

Muchas gracias, de antemano.

Saludos.

ZiTAL · #2 (**permalink**) 20/04/2009, 03:07

Aupa, para empezar no se que tiene que ver esto con ajax pero bueno.

No tienes porque duplicar código ya que puedes utilizar la misma para hacer ambas cosas:

Código javascript:

Ver originalonload=function()
{
set_opacity(document.getElementById('miDiv1'),.5);
set_opacity(document.getElementById('miDiv2'),.5);
}

borra las funciones duplicadas y pon esto en el primer onload, el segundo borralo.

pabloe9k · #3 (**permalink**) 20/04/2009, 07:07

Cita:

Iniciado por ZiTAL

Aupa, para empezar no se que tiene que ver esto con ajax pero bueno.

No tienes porque duplicar código ya que puedes utilizar la misma para hacer ambas cosas:

Código javascript:

Ver originalonload=function()
{
set_opacity(document.getElementById('miDiv1'),.5);
set_opacity(document.getElementById('miDiv2'),.5);
}

borra las funciones duplicadas y pon esto en el primer onload, el segundo borralo.

Muchas gracias!
Lo voy a probar esta misma noche.

Y, por si te interesa saber, la consulta apuntaba por el lado de AJAX porque cuando hago click en un link, mediante ajax, se despliega un formulario con datos obtenidos de una consulta a la base de datos que se hace mediante AJAX, sin refrescar la ventana, en una nueva capa. Y yo buscaba que esa nueva capa sea transparente.
Sólo eso.
Je.

Gracias nuevamente.
Saludos!

GatorV · #4 (**permalink**) 20/04/2009, 08:51

Tema trasladado desde AJAX