Floating login and login query

Question

I want to create a rectangle with login on the page I’m working on. I don’t want login to go to a page with login only.

That’s possible ?

Another question is to do with each login see a specific query. This is possible?

Answer 1

As for the first part of your question you can do with something like the one I’ve built now, click "Run code snippet" to see the code in action: (note that I did not mess with any alignments)

$(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>

If you want the login form to be centered vertically, you will have to make adjustments to the code.

EDITED

I added the ajax code to the submit form event. Now in 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.";
}

?>

In this PHP code you can manipulate the query the way you prefer.

Answer 2

Friend you can use the Jquery dialog. Below follows the link:

http://jqueryui.com/dialog/#modal-form