Estou querendo fazer uma barra de login com lightbox, ou seja, quando clicar no link "entrar no site" vai aparecer uma <div>
que estava oculta e aparecerá um fundo escuro transparente.
Como se constrói algo assim?
Estou querendo fazer uma barra de login com lightbox, ou seja, quando clicar no link "entrar no site" vai aparecer uma <div>
que estava oculta e aparecerá um fundo escuro transparente.
Como se constrói algo assim?
Matheus, você pode usar Bootstrap
:
HTML
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" href="#meuLoginModal" >Login</a>
<div class="modal hide" id="meuLoginModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Meu Login</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Senha"></p>
<p><button type="submit" class="btn btn-primary">Entrar</button>
<a href="#">Esqueceu a senha?</a>
</p>
</form>
</div>
<div class="modal-footer">
Novo aqui?
<a href="#" class="btn btn-primary">Registrar</a>
</div>
</div>
</div>
</div>
JavaScript
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>