Foros del Web » Creando para Internet » CSS »

opacity

 Estas en el tema de opacity en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/12/2011, 17:07
 
Fecha de Ingreso: marzo-2011
Mensajes: 226
Antigüedad: 13 años, 7 meses
Puntos: 1
opacity
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
  1. <body>
  2.  
  3.         <div id="contenedor">  
  4.             
  5.             <header>   <!-- inicio del header -->
  6.                 <hgroup>
  7.                     <h1> <!-- contiene las cajas para llevar a cabo el logeo -->
  8.                         <div id="login" style="display:inline; height:5px; width:100px;" >
  9.                         <form method="post" action="login.php" id="login_form">
  10.                         <table>
  11.                         <tr>
  12.                         <td>Usuario:</td>
  13.                         <td><input name="username" type="text" id="username" size="20" class=":required :only_on_submit" /></td>
  14.                         <td>contraseña:</td>
  15.                         <td><input name="userpass" type="password" id="userpass" size="20" class=":required :only_on_submit" /></td>
  16.                         <td><input type="image" src="img/bt_login.png" id="submit" name="submit" class="btsend"></td>
  17.                         </tr>
  18.                         </table>
  19.                         </form>
  20.                         
  21.                         <script>
  22.                         $("#login_form").submit(function(event){
  23.                             event.preventDefault();
  24.  
  25.                             $.ajax({
  26.                                 type: "POST",
  27.                                 url: "login.php",
  28.                                 data: $("#login_form").serialize(),
  29.                                 dataType: 'json',
  30.                                 success: function(data){
  31.                                     if(data===false){
  32.                                         alert("datos incorrectos");
  33.                                     }else{
  34.                                         
  35.                                         $("#olvido").css({'display':'none'}); // una vez logueado desaparece "olvidaste tu contrseña" 
  36.                                         $("#login").css({'display':'none'}); 
  37.                                         window.location.href = ".";
  38.                                     }  
  39.                                 }
  40.                             }); 
  41.                         });
  42.                         
  43.                         </script>
  44.                         
  45.                         </div>  <!-- fin div login -->
  46.                         <nav id="olvido" style="display:inline;">
  47.                         <a class="show" href="enviapassword.php" style="margin-left:260px; font-size:11px; color:#FFF; text-decoration:none;"> olvidaste tu contrase&ntilde;a</a>
  48.                        </nav>
  49.                         <div id="usuRegistrado" class="show">
  50.                         <?php $usuarioactual = $_SESSION['actual']; ?>
  51.                         <?php // comprobamos q un usuario entro y se valido en el sistema para darle la bienvenida
  52.                         if( !empty($usuarioactual)){ //comprobamos q la variable de inicio de sesion no esta vacia 
  53.                             ?>
  54.                         <br><i style="font-size:13px; color:#FFF" > Bienvenido:          <?php echo $usuarioactual;?></i>
  55.                         <script>
  56.                             $("#olvido").css({'display':'none'}); // una vez logueado desaparece "olvidaste tu contrseña" 
  57.                             $("#login").css({'display':'none'}); // una vez logueado desaparece el formulario de login
  58.                         </script>
  59.                         
  60.                         
  61.                         
  62.                         
  63.                         
  64.                         <!--<a href="logout.php" style="font-size:13px; color:#FFF; text-decoration:none;">desconectarse </a>    -->
  65.                         <a href="logout.php"><img src="img/icono-cerrar.png"></a>
  66.                         
  67.                         <nav id="modificaDatos">
  68.                         
  69.                             <a class="show" href="modificaTusDatos.php" style="font-size:10px; color:#FFF; text-decoration:none;">  modificar mis datos </a>
  70.                         </nav> 
  71.                         <?php
  72.                         if($usuarioactual== "admin"){
  73.                         ?> 
  74.                         <script>
  75.                             $("#modificaDatos").css({'display':'none'}); 
  76.                         </script>
  77.                         <?php }  ?>
  78.                        
  79.                         <?php  // abrimos y cerramos php para englobar la llave y asi quede todo dentro del if
  80.                         }
  81.                         ?>
  82.                         
  83.                         
  84.                         </div> <!-- fin div usuario registrado -->
  85.                         
  86.                     </h1>
  87.                     <h2> <!-- contiene el logotipo de la pagina -->
  88.                     </h2>
  89.                 </hgroup> <!-- fin de hgroup -->
  90.                  <nav id="principal"> <!-- contiene los enlaces para la navegacion de la pagina -->
  91.                     <ul class="lista_horizontal">
  92.                     <table cellpadding="2">
  93.                     <tr>
  94.                         <li class="lista_horizontal">
  95.                             <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>
  96.                         </li>
  97.                         <li class="lista_horizontal">
  98.                             <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>
  99.                         </li>
  100.                         <li class="lista_horizontal">
  101.                             <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>
  102.                         </li>
  103.                         <li class="lista_horizontal">
  104.                             <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>
  105.                         </li>
  106.                         <li class="lista_horizontal">
  107.                             <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>
  108.                         </li>
  109.                         <li class="lista_horizontal">
  110.                             <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>
  111.                         </li>
  112.                         </tr>
  113.                         </table>
  114.                     </ul> <!-- fin ul -->
  115.                 
  116.                 </nav> <!-- fin del nav -->
  117.              
  118.             </header> <!-- fin del header -->
  119.            
  120.             <div id="contenido">    
  121.                 <?php 
  122.                     include("home.php"); 
  123.                 ?> 
  124.                 
  125.             
  126.             </div> <!-- fin contenido -->
  127.            
  128.             <div id="flotante">
  129.                 <!-- este div se cargara en caso de q el usuario pulse "olvidaste tu contraseña o una vez logeado modifique sus datos"  -->
  130.             </div>
  131.             
  132.         </div> <!-- fin div contenedor -->              
  133.         
  134.     <div id ="pie">
  135.     
  136.     <footer> <!-- inicio del footer -->
  137.     
  138.         <div id="bloque_p1">
  139.             <p>Edificio Politécnico - C.P. 32005  </p>
  140.                             <p>Grupo de aerobiología 2010 </p>
  141.                             
  142.         </div> <!-- fin bloque_1 -->
  143.     </footer> <!-- fin del footer -->
  144.     </div> 
  145.  
  146. </body>

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
  1. $("#olvido a").each(function(){
  2.             
  3.             var href = $(this).attr("href");  // obtenemos la direccion de href y la cargamos en la variable
  4.             $(this).click(function(){    // al hacer click  aparecera un div flotante en donde se cargara el contenido de la direccion del href
  5.                 //alert("hola");
  6.                 //$("#contenedor").css({'opacity':'0.35','-moz-opacity':' 0.35','filter':'alpha(opacity=75)'});
  7.                 //$("#pie").css({'opacity':'0.35','-moz-opacity':' 0.35','filter':'alpha(opacity=75)'});
  8.                 $("#flotante").css({'opacity':'1','-moz-opacity':' 1','filter':'alpha(opacity=1)'});
  9.                 $("#flotante").fadeOut(0);
  10.                 $("#flotante").fadeIn().load(href); 
  11.                 
  12.                 
  13.             });
  14.             $(this).attr({href:"#"});
  15.     
  16.     
  17. });

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

Etiquetas: contenido, opacity, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:32.