Ventana "de registro" en web

Polkiko · #1 (**permalink**) 28/01/2012, 08:09

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

maycolalvarez · #2 (**permalink**) 28/01/2012, 09:54

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

Polkiko · #3 (**permalink**) 28/01/2012, 12:06

Ok, haber si alguien me puede ayudar... veo que debe de ser algo complicado

doword · #4 (**permalink**) 28/01/2012, 16:19

codigo HTML....

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
* {
    padding:0;
    margin:0;
    color:red;
}
#fondo-oscuro {
    background:url(http://miaguilaroja.com/portada/img/bg-emerge.png);
    height:100%;
    width:100%;
    position:absolute;
    z-index:2;
    left:0px;
    top:0px;
}
#cotenido {
    width:500px;
    background:#00F;
    margin:50px auto 0 auto;
}
</style>
<script type="text/javascript">
function show_form1() {
    document.getElementById('fondo-oscuro').style.display='block';
}
function hide_form1() {
    document.getElementById('fondo-oscuro').style.display='none';
}
</script>
</head>
 
<body>
<!-- fondo oscuro-->
<div id="fondo-oscuro" style="display:none;">
 
<div id="cotenido">
<p>prueba, del texto!</p>
 
<p style="text-align:center !important;"><a href="#" onclick="hide_form1()">cerrar</a></p>
</div>
</div>
<!-- termina fondo oscuro-->
 
 
<p>hola como estas?</p>
<p><a href="#" onclick="show_form1()">¡CLIC AQUI!</a></p>
</body>
</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...

Polkiko · #5 (**permalink**) 28/01/2012, 17:42

Cita:

Iniciado por doword

codigo HTML....

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
* {
    padding:0;
    margin:0;
    color:red;
}
#fondo-oscuro {
    background:url(http://miaguilaroja.com/portada/img/bg-emerge.png);
    height:100%;
    width:100%;
    position:absolute;
    z-index:2;
    left:0px;
    top:0px;
}
#cotenido {
    width:500px;
    background:#00F;
    margin:50px auto 0 auto;
}
</style>
<script type="text/javascript">
function show_form1() {
    document.getElementById('fondo-oscuro').style.display='block';
}
function hide_form1() {
    document.getElementById('fondo-oscuro').style.display='none';
}
</script>
</head>
 
<body>
<!-- fondo oscuro-->
<div id="fondo-oscuro" style="display:none;">
 
<div id="cotenido">
<p>prueba, del texto!</p>
 
<p style="text-align:center !important;"><a href="#" onclick="hide_form1()">cerrar</a></p>
</div>
</div>
<!-- termina fondo oscuro-->
 
 
<p>hola como estas?</p>
<p><a href="#" onclick="show_form1()">¡CLIC AQUI!</a></p>
</body>
</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!