Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » sistema login en ventana modal

JavaScript - sistema login en ventana modal

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 27
Ha aumentado su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

sistema login en ventana modal

Publicado por diego (27 intervenciones) el 20/12/2017 21:26:08
Hola de nuevo a todos, mi pregunta es la siguiente , se puede hacer un sistema login en una ventana modal?
No voy a utilizar php, es solo para comprobar a través de javascript o jquery que el usuario ha introducido correctamente sus datos.
Si los datos son corectos se cerraría la ventana modal y aparcería mi index.html.
Gracias de nuevo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

sistema login en ventana modal

Publicado por ScriptShow (692 intervenciones) el 24/12/2017 14:04:32
Saludos Diego,

por empezar con códigos adaptables, sencillos ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">
<title>Modal Form</title>
<style>
<!--

* {

margin:0px;

padding:0px;

border:0px;

outline:0px;

outline:none;

font:normal normal 100%/1.0 sans-serif;

}

.modal {

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

background:#444444;

filter:alpha(opacity=80);

-khtml-opacity:0.8;

-moz-opacity:0.8;

opacity:0.8;

}

.form {

width:280px;

height:auto;

padding:48px;

margin:8% auto;

text-align:center;

background:#FFFFFF;

}

input {

width:100%;

padding:8px;

margin:8px auto;

background:#FFFFFF;

box-sizing:border-box;

border:1px solid #D4D4D4;

}

//-->

</style>

<script>

<!--

function check() {

var m=document.getElementById("mail");

var p=document.getElementById("pass");

var filter=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/;

if (filter.test(m.value) && p.value=="Test") {location.href="index.html";}

return false;

}

//-->

</script>

</head>

<body>

<div class="modal">

<form class="form" action="javascript:void(check())">

<h4>L O G I N</h4>

<br>

<input type="text" id="mail" name="mail" value="">

<input type="text" id="pass" name="pass" value="">

<input type="submit" value="Envíar">

<input type="reset" value="Borrar">

<br><br>

<small>Modal Form</small>

</form>

</div>

</body>

</html>

Para ver el proceso, hay que escribir una dirección de correo válida y la contraseña: Test

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar