Floating login and Login query

Navigation
1

I want to create a rectangle with login on the page that I'm working on. I do not want the login to go to a page with just the login.

Is this possible?

Another question and ask each login to see a specific query. It is possible?

    
asked by anonymous 03.02.2015 / 18:46

2 answers

1

As for the first part of your question you can do with something like the one I created right now, click on "Run snippet" to see the code in action: (note that I did not move 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áriodelogin--><divid="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 in the event of submitting the form. 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 any way you like.

    
04.02.2015 / 16:49
0

Friend you can use the JQuery dialog. Below is the link:

link

    
04.02.2015 / 18:11
Position insert bar in editable jquery div Subcategory listing according to selected category