Buenas,
Estoy empezando con Ajax y veo muchas webs que tienen el tipo boton de login que al pulsar aparece una especie de pop-up (bonito) donde aparece un formulario de login
Ej. en la parte superior de
http://digg.com/
Estoy haciendo un apartado similar en mi web, y me gustaría que al pulsar sobre un enlace me abriese un formulario de login (user y pass) y que al pulsar enviar comprobase que son correctos y cambiar el contenido de la página principal.
El ejemplo más parecido que he encontrado es el de la siguiente página
http://prototype-window.xilinus.com/samples.html
7. Open a login window (click here)
Digo pues lo copio y veo si funciona, pero no entiendo muy bien como llamarlo, ya que en el ejemplo dejan puesto el css y la función de ajax. He intuido que hacía falta dos librerias y estoy probando con esto así...
Pero tan siquiera me detecta el enlace :S:S:S no se si estoy copiando el codigo ajax donde toca... si me falta alguna librería más, o si no estoy llamando correctamente al ajax
Podéis echarme una mano?
Muchas gracias de antemano!
Código php:
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> LOGIN AJAX</title>
<style>
.login_label, .login_input, .login_error {
padding:10px;
color:#000;
text-align:left;
float:left;
width:100px;
font-size:20px;
color:#64355A;
}
.login_input {
width:200px;
}
.login_error {
width:250px;
color:#F00;
}
.login_input input {
width:100%;
}
#login {
background:#123;
}
</style>
<script type="text/javascript" src="prototype.js"> </script>
<script type="text/javascript" src="window.js"> </script>
</head>
<script>
Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400, okLabel: "login", cancelLabel: "cancel", onOk:function(win){ $('login_error_msg').innerHTML='Login or password inccorect'; $('login_error_msg').show(); Windows.focusedWindow.updateHeight(); new Effect.Shake(Windows.focusedWindow.getId()); return false;}});
</script>
<body>
<div id="login" style="display:none">
<p><span id='login_error_msg' class="login_error" style="display:none"> </span></p>
<div style="clear:both"></div>
<p><span class="login_label">login</span>
<span class="login_input"><input type="text"/></span></p>
<div style="clear:both"></div>
<p><span class="login_label">password</span>
<span class="login_input"><input type="password"/></span></p> <div style="clear:both"></div>
</div>
7. Open a login windows
<span id="open_login_click_button" class="title" onclick="Application.evalCode('open_login', true)" onmouseout="$('open_login_click_button').removeClassName('selected')" onmouseover="$('open_login_click_button').addClassName('selected')" href="#">click here</span>
</body>
</html>