hola a todos, me encuentro haciendo una web e intentando hacer una especie de ventana modal me encontre con un problemilla que mi inexperiencia hace q no pueda resolver, el problema es el siguiente,
tengo este index.
Código HTML:
Ver original
<header> <!-- inicio del header --> <h1> <!-- contiene las cajas para llevar a cabo el logeo --> <div id="login" style="display:inline; height:5px; width:100px;" > <form method="post" action="login.php" id="login_form"> <td><input name="username" type="text" id="username" size="20" class=":required :only_on_submit" /></td> <td><input name="userpass" type="password" id="userpass" size="20" class=":required :only_on_submit" /></td> <td><input type="image" src="img/bt_login.png" id="submit" name="submit" class="btsend"></td>
$("#login_form").submit(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "login.php",
data: $("#login_form").serialize(),
dataType: 'json',
success: function(data){
if(data===false){
alert("datos incorrectos");
}else{
$("#olvido").css({'display':'none'}); // una vez logueado desaparece "olvidaste tu contrseña"
$("#login").css({'display':'none'});
window.location.href = ".";
}
}
});
});
</div> <!-- fin div login --> <nav id="olvido" style="display:inline;"> <a class="show" href="enviapassword.php" style="margin-left:260px; font-size:11px; color:#FFF; text-decoration:none;"> olvidaste tu contrase
ña
</a> <div id="usuRegistrado" class="show"> <?php $usuarioactual = $_SESSION['actual']; ?>
<?php // comprobamos q un usuario entro y se valido en el sistema para darle la bienvenida
if( !empty($usuarioactual)){ //comprobamos q la variable de inicio de sesion no esta vacia
?>
<br><i style="font-size:13px; color:#FFF" > Bienvenido:
<?php echo $usuarioactual;?></i> $("#olvido").css({'display':'none'}); // una vez logueado desaparece "olvidaste tu contrseña"
$("#login").css({'display':'none'}); // una vez logueado desaparece el formulario de login
<!--<a href="logout.php" style="font-size:13px; color:#FFF; text-decoration:none;">desconectarse </a> -->
<a href="logout.php"><img src="img/icono-cerrar.png"></a>
<a class="show" href="modificaTusDatos.php" style="font-size:10px; color:#FFF; text-decoration:none;"> modificar mis datos
</a> <?php
if($usuarioactual== "admin"){
?>
$("#modificaDatos").css({'display':'none'});
<?php } ?>
<?php // abrimos y cerramos php para englobar la llave y asi quede todo dentro del if
}
?>
</div> <!-- fin div usuario registrado -->
<h2> <!-- contiene el logotipo de la pagina --> </hgroup> <!-- fin de hgroup --> <nav id="principal"> <!-- contiene los enlaces para la navegacion de la pagina --> <ul class="lista_horizontal"> <li class="lista_horizontal"> <td class="spaciado" colspan="3"><a href="home.php"><img src="img/bt_inicio.png" class="fade" id="inicio" style="background-image::url(img/bt_inicio_pulsado.png)" /></a></td> <li class="lista_horizontal"> <td class="spaciado" colspan="3"><a href="miembros.php"><img src="img/bt_miembros.png" class="fade" id="miembros" style="background-image::url(img/bt_miembros_puls.png)"/></a></td> <li class="lista_horizontal"> <td class="spaciado" colspan="3"><a href="publicaciones.php"><img src="img/bt_public.png" class="fade" id="publicaciones" style="background-image::url(img/bt_public_puls.png)"/></a></td> <li class="lista_horizontal"> <td class="spaciado" colspan="3" ><a href="proyectos.php"><img src="img/bt_proyectos.png" class="fade" id="proyectos" style="background-image::url(img/bt_proy_puls.png)"/></a></td> <li class="lista_horizontal"> <td class="spaciado" colspan="3" ><a href="docencia.php"><img src="img/bt_docencia.png" class="fade" id="docencia" style="background-image::url(img/bt_doc_puls.png)"/></a></td> <li class="lista_horizontal"> <td class="spaciado" colspan="3"><a href="colaboraciones.php"><img src="img/bt_colabor.png" class="fade" id="colaboraciones" style="background-image::url(img/bt_colab_puls.png)"/></a></td>
</nav> <!-- fin del nav -->
</header> <!-- fin del header -->
<?php
include("home.php");
?>
</div> <!-- fin contenido -->
<!-- este div se cargara en caso de q el usuario pulse "olvidaste tu contraseña o una vez logeado modifique sus datos" -->
</div> <!-- fin div contenedor -->
<footer> <!-- inicio del footer -->
<p>Edificio Politécnico - C.P. 32005
</p> <p>Grupo de aerobiología 2010
</p>
</div> <!-- fin bloque_1 --> </footer> <!-- fin del footer -->
mi idea es q si el usuario se olvida de sus datos de acceso le aparezca un recuadro en el q escribir su email para que el sistema se los envie, esto lo hago cargando un href en el div id= flotante.
el codigo javascript que hace posible esto es el siguiente.
Código Javascript
:
Ver original$("#olvido a").each(function(){
var href = $(this).attr("href"); // obtenemos la direccion de href y la cargamos en la variable
$(this).click(function(){ // al hacer click aparecera un div flotante en donde se cargara el contenido de la direccion del href
//alert("hola");
//$("#contenedor").css({'opacity':'0.35','-moz-opacity':' 0.35','filter':'alpha(opacity=75)'});
//$("#pie").css({'opacity':'0.35','-moz-opacity':' 0.35','filter':'alpha(opacity=75)'});
$("#flotante").css({'opacity':'1','-moz-opacity':' 1','filter':'alpha(opacity=1)'});
$("#flotante").fadeOut(0);
$("#flotante").fadeIn().load(href);
});
$(this).attr({href:"#"});
});
mi idea es, q al pulsar en el enlace cambie la opacidad de contenedor y q flotante tenga opacidad 1
estuve leyendo en sitios que css hace q herede la opacidad de contenedor x estar flotante contenido dentro de contenedor, entonces lo q hice fue ponerlo fuera pero tp me va no se xq.
si alguien tuvo un problema similar, o sabe una manera de solucionarlo o alguna diferente de conseguir lo mismo xq estoy algo deskiciado ya, xq todos los plugins q vi de ventanas modales no me convencen para la estetica de mi proyecto
gracias x vuestras posibles respuestas
gracias