Foros del Web » Creando para Internet » CSS »

problema con css de lightbox automatico

Estas en el tema de problema con css de lightbox automatico en el foro de CSS en Foros del Web. hola. Estoy haciendo un lightbox que contiene un formulario. este se activa automaticamente al iniciar la web pero lo malo es que el fondo que ...
  #1 (permalink)  
Antiguo 18/03/2011, 10:54
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
problema con css de lightbox automatico

hola.

Estoy haciendo un lightbox que contiene un formulario. este se activa automaticamente al iniciar la web pero lo malo es que el fondo que tiene opacidad no deja ver lo que hay detras de la ventana ligtbox. os dejo el codigo css y html que estoy usando.


el fallo es que no se ve nada en el fondo con transparencia.

lightboxcss:


Código:
#filter
{
	display: none;
	position:relative;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index:101;
	opacity:0.5;
	filter: alpha(opacity=20);
}


#box 
{
	display: none;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 400px;
	height: 200px;
	padding: 48px;
	margin:0;
	border: 1px solid black;
	background-color: white;
	z-index:101;
	overflow: visible;
}

#boxtitle
{
	position:absolute;
	float:left;
	top:0;
	left:0;
	width:496px;
	height:24px;
	padding:0;
	padding-top:4px;
	/*left-padding:5px;*/
	margin:0;
	border-bottom:4px solid #3CF;
	background-color: #09c;
	color:white;
	text-align:center;
}

index.html

Código HTML:
<body bgcolor="#E0ECF6" leftmargin="0" rightmargin="0" bottommargin="0" onLoad="openbox('Title of the Form', 1);">
<div style="display: none;" id="filter"></div>
<div style="opacity: 0.99; display: none;" id="box">
  <span id="boxtitle">Title of the Form</span>
  <form method="GET" action="lightbox-form-test.html" target="_parent">
      
    <p>Email adress: 
      <input name="email" value="[email protected]" maxlength="60" size="60" type="text">
    </p>
      
    <p>Male 
      <input name="genre" value="man" checked="checked" type="radio">
      Female 
      <input name="genre" value="woman" type="radio">

    </p>
      
    <p> City of current residence 
      <select name="select">
        <option selected="selected">New York</option>
        <option>Chicago</option>
        <option>Miami</option>
        <option>Los Angeles</option>

        <option>Dallas</option>
      </select>
    </p>
    <p> 
      <input name="submit" type="submit">
      <input name="cancel" value="Cancel" onClick="closebox()" type="button">
    </p>
  </form>
</div> 

por que no se ve el fondo? por cierto en ie version 8 no se vé nada de nada solo un fondo gris!!!
  #2 (permalink)  
Antiguo 19/03/2011, 09:17
 
Fecha de Ingreso: abril-2010
Ubicación: Chile
Mensajes: 76
Antigüedad: 7 años, 8 meses
Puntos: 3
Respuesta: problema con css de lightbox automatico

Quieres que se vea medianamente transparente o que se vea todo el contenido que hay detras, si es la segunda elimina el id filter o quitale el background-color
  #3 (permalink)  
Antiguo 19/03/2011, 12:39
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 12 años
Puntos: 87
Respuesta: problema con css de lightbox automatico

Tienes que poner todo el codigo html (con javascript) para poder ver con presicion que sucede.
  #4 (permalink)  
Antiguo 19/03/2011, 13:28
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con css de lightbox automatico

ahi os dejo todo el codigo:

css:
Código:
#filter
{
	display: none;
	position:relative;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index:101;
	opacity:0.5;
	filter: alpha(opacity=20);
}


#box 
{
	display: none;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 400px;
	height: 200px;
	padding: 48px;
	margin:0;
	border: 1px solid black;
	background-color: white;
	z-index:101;
	overflow: visible;
}

#boxtitle
{
	position:absolute;
	float:left;
	top:0;
	left:0;
	width:496px;
	height:24px;
	padding:0;
	padding-top:4px;
	/*left-padding:5px;*/
	margin:0;
	border-bottom:4px solid #3CF;
	background-color: #09c;
	color:white;
	text-align:center;
}
  #5 (permalink)  
Antiguo 19/03/2011, 13:31
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: problema con css de lightbox automatico

el codigo del index no lo puedo poner entero por que no cabe y es una pagina flash.

si quito en el css el codigo de id filter no me salta la ventana popup y si lo pongo me salta pero el fondo no se ve.
  #6 (permalink)  
Antiguo 19/03/2011, 18:08
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 12 años
Puntos: 87
Respuesta: problema con css de lightbox automatico

Hay cientos de herramientas gratuitas con las que puedes colocar el codigo completo; una de ellas Google Docs por ej.
  #7 (permalink)  
Antiguo 14/10/2012, 00:11
 
Fecha de Ingreso: abril-2011
Ubicación: Peru
Mensajes: 486
Antigüedad: 6 años, 8 meses
Puntos: 9
Respuesta: problema con css de lightbox automatico

Cita:
Iniciado por rufus Ver Mensaje
el codigo del index no lo puedo poner entero por que no cabe y es una pagina flash.

si quito en el css el codigo de id filter no me salta la ventana popup y si lo pongo me salta pero el fondo no se ve.
Hola Rufus
solo tenias que poner el onLoad asi

<body onLoad="openbox('Title of the Form', 1)">

Etiquetas: automatico, lightbox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:16.