problema con css de lightbox automatico

rufus · #1 (**permalink**) 18/03/2011, 09:54

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!!!

KaozC9 · #2 (**permalink**) 19/03/2011, 08:17

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

InKarC · #3 (**permalink**) 19/03/2011, 11:39

Tienes que poner todo el codigo html (con javascript) para poder ver con presicion que sucede.

rufus · #4 (**permalink**) 19/03/2011, 12:28

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;
}

rufus · #5 (**permalink**) 19/03/2011, 12:31

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.

InKarC · #6 (**permalink**) 19/03/2011, 17:08

Hay cientos de herramientas gratuitas con las que puedes colocar el codigo completo; una de ellas Google Docs por ej.

rascabuchitos · #7 (**permalink**) 13/10/2012, 23:11

Cita:

Iniciado por rufus

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)">