Quero criar um retangulo com login sobre a página que estou a trabalhar. Nao quero que o login vá para uma página só com o login.
Isso é possível ?
Outra duvida e fazer com cada login veja uma query especifica. Isso é possivel?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeQuero criar um retangulo com login sobre a página que estou a trabalhar. Nao quero que o login vá para uma página só com o login.
Isso é possível ?
Outra duvida e fazer com cada login veja uma query especifica. Isso é possivel?
Quanto a primeira parte da sua dúvida você pode fazer com algo do tipo que montei agora, clique em "Executar trecho de código" para ver o código em ação: (note que não mexi com nada de alinhamentos)
$(function(){
// Ao clicar para mostrar o formulário de login
$("button.fazer-login").click(function(){
$("#login-container").fadeIn("fast");
});
// Ao clicar para fechar o formulário de login
$("button.fechar-login").click(function(){
$("#login-container").fadeOut("fast");
});
// Se preferir que o login seja por AJAX
$("#login-container #login").submit(function(e){
// O e.preventDefault impede do formulário ser enviado para o faz_login.php, recarregando a página imediatamente
e.preventDefault();
$.ajax({
type: 'POST',
url: 'faz_login.php',
data: $("#login").serialize(),
success: function(data){
// Mostrar a resposta em um alert
alert(data);
// Ou se preferir fazer o debug pelo console
console.log(data);
}
});
});
});
body{
background:#ECECEC;
margin:0;
padding:0;
}
#login-container{
background: rgba(0,0,0,0.8);
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
z-index:999;
}
#login{
margin:0 auto;
width:500px;
height:500px;
text-align:center;
margin-top:100px;
}
#login input[name=usuario]{
margin:0px 0 5px;
}
#login input[type=submit]{
margin:15px 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Formulário de login -->
<div id="login-container" style="display:none">
<form id="login" method="post" action="faz_login.php">
<input type="text" placeholder="Usuário" name="usuario" /><br/>
<input type="password" placeholder="Senha" name="senha" /><br/>
<input type="submit" value="Entrar" /><br/>
<button class="fechar-login">Fechar login</button>
</form>
</div>
<!-- Conteúdo da página -->
Aqui é a sua página.<br/><br/>
<button class="fazer-login">Clique aqui para fazer login!</button>
Se você quiser que o formulário de login fique centralizado na vertical, irá ter que fazer ajustes no código.
EDITADO
Adicionei o código de ajax no evento de enviar o formulário. Agora no faz_login.php
<?php
$usuario = $_POST['usuario'];
$senha = $_POST['senha'];
$query = "SELECT count(*) FROM usuarios WHERE usuario = '".$usuario."' AND senha = '".$senha."'";
$consulta = mysql_query($query);
$resultado = mysql_fetch_array($consulta);
if($resultado[0]){
echo "Login realizado com sucesso!";
}
else{
echo "Dados incorretos.";
}
?>
Nesse código PHP você pode manipular a consulta da forma que preferir.
Amigo você pode usar o dialog do JQuery. Abaixo segue o link: