Foros del Web » Programando para Internet » Javascript »

Ventana "de registro" en web

Estas en el tema de Ventana "de registro" en web en el foro de Javascript en Foros del Web. Hola, Hoy he decidido actualizar mi sistema de registro/logueo He decidido, para facilitar al usuario, crear dichos formularios "en una ventana emergente" Digamos que, el ...
  #1 (permalink)  
Antiguo 28/01/2012, 08:09
 
Fecha de Ingreso: enero-2011
Mensajes: 59
Antigüedad: 9 años
Puntos: 2
Ventana "de registro" en web

Hola,

Hoy he decidido actualizar mi sistema de registro/logueo
He decidido, para facilitar al usuario, crear dichos formularios "en una ventana emergente"

Digamos que, el usuario al pulsar un link, les abra una pequeña ventanita dentro de la web, con los formularios y que (ya mas complicado) al introducir, por ejemplo, el nick y el nombre erroneamente, les advirtiera un mensaje de alerta convencional...

Tengo entendido, que se realiza con javascript, pero no se muy bien del todo si es necesario algún lenguaje más...
Saludos!

PD: Sería algo parecido de lo que hay en esta web de un juego online: www.miaguilaroja.com (pulsar en Entrar o en "Juega gratis")
  #2 (permalink)  
Antiguo 28/01/2012, 09:54
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 5 meses
Puntos: 1532
Respuesta: Ventana "de registro" en web

depende también de CSS, que es el que permite realmente "emular" dicha ventana, a la que se les llaman modal js dialog o lightbox
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 28/01/2012, 12:06
 
Fecha de Ingreso: enero-2011
Mensajes: 59
Antigüedad: 9 años
Puntos: 2
Respuesta: Ventana "de registro" en web

Ok, haber si alguien me puede ayudar... veo que debe de ser algo complicado
  #4 (permalink)  
Antiguo 28/01/2012, 16:19
 
Fecha de Ingreso: febrero-2011
Mensajes: 99
Antigüedad: 8 años, 10 meses
Puntos: 10
Respuesta: Ventana "de registro" en web

codigo HTML....
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <style type="text/css">
  6. * {
  7.     padding:0;
  8.     margin:0;
  9.     color:red;
  10. }
  11. #fondo-oscuro {
  12.     background:url(http://miaguilaroja.com/portada/img/bg-emerge.png);
  13.     height:100%;
  14.     width:100%;
  15.     position:absolute;
  16.     z-index:2;
  17.     left:0px;
  18.     top:0px;
  19. }
  20. #cotenido {
  21.     width:500px;
  22.     background:#00F;
  23.     margin:50px auto 0 auto;
  24. }
  25. <script type="text/javascript">
  26. function show_form1() {
  27.     document.getElementById('fondo-oscuro').style.display='block';
  28. }
  29. function hide_form1() {
  30.     document.getElementById('fondo-oscuro').style.display='none';
  31. }
  32. </head>
  33.  
  34. <!-- fondo oscuro-->
  35. <div id="fondo-oscuro" style="display:none;">
  36.  
  37. <div id="cotenido">
  38. <p>prueba, del texto!</p>
  39.  
  40. <p style="text-align:center !important;"><a href="#" onclick="hide_form1()">cerrar</a></p>
  41. </div>
  42. </div>
  43. <!-- termina fondo oscuro-->
  44.  
  45.  
  46. <p>hola como estas?</p>
  47. <p><a href="#" onclick="show_form1()">¡CLIC AQUI!</a></p>
  48. </body>
  49. </html>

funciona de la sig manera...

ya esta establecido que "fondo-oscuro" no se vera, pues y cuando hagas y podras ver 2 funciones que son "show_form1()" y "hide_form1()" cada una ya se explica como funciona por su propio nombre...

si tienes preguntas dime y juega un poco con el codigo para que lo entiendas...

Última edición por doword; 28/01/2012 a las 16:31
  #5 (permalink)  
Antiguo 28/01/2012, 17:42
 
Fecha de Ingreso: enero-2011
Mensajes: 59
Antigüedad: 9 años
Puntos: 2
Respuesta: Ventana "de registro" en web

Cita:
Iniciado por doword Ver Mensaje
codigo HTML....
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <style type="text/css">
  6. * {
  7.     padding:0;
  8.     margin:0;
  9.     color:red;
  10. }
  11. #fondo-oscuro {
  12.     background:url(http://miaguilaroja.com/portada/img/bg-emerge.png);
  13.     height:100%;
  14.     width:100%;
  15.     position:absolute;
  16.     z-index:2;
  17.     left:0px;
  18.     top:0px;
  19. }
  20. #cotenido {
  21.     width:500px;
  22.     background:#00F;
  23.     margin:50px auto 0 auto;
  24. }
  25. <script type="text/javascript">
  26. function show_form1() {
  27.     document.getElementById('fondo-oscuro').style.display='block';
  28. }
  29. function hide_form1() {
  30.     document.getElementById('fondo-oscuro').style.display='none';
  31. }
  32. </head>
  33.  
  34. <!-- fondo oscuro-->
  35. <div id="fondo-oscuro" style="display:none;">
  36.  
  37. <div id="cotenido">
  38. <p>prueba, del texto!</p>
  39.  
  40. <p style="text-align:center !important;"><a href="#" onclick="hide_form1()">cerrar</a></p>
  41. </div>
  42. </div>
  43. <!-- termina fondo oscuro-->
  44.  
  45.  
  46. <p>hola como estas?</p>
  47. <p><a href="#" onclick="show_form1()">¡CLIC AQUI!</a></p>
  48. </body>
  49. </html>

funciona de la sig manera...

ya esta establecido que "fondo-oscuro" no se vera, pues y cuando hagas y podras ver 2 funciones que son "show_form1()" y "hide_form1()" cada una ya se explica como funciona por su propio nombre...

si tienes preguntas dime y juega un poco con el codigo para que lo entiendas...
!Muchisimas gracias Doword!
Era justo lo que quería, y ya lo he acondicionado perfectamente con CSS todos lo que queira poner dentro.
Un saludo a todos!

Etiquetas: formulario, registro, ventanas
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

SíEste tema le ha gustado a 1 personas




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