Skip to content

Instantly share code, notes, and snippets.

@rodrigozan

rodrigozan/login_modal_bootstrap.html

Last active August 12, 2021 04:24
Show Gist options
  • Save rodrigozan/564ff49e87a068b783dabc4d6521d266 to your computer and use it in GitHub Desktop.
Save rodrigozan/564ff49e87a068b783dabc4d6521d266 to your computer and use it in GitHub Desktop.
Download ZIP
Formulário de Login em Janela Modal com Bootstrap
Raw
login_modal_bootstrap.html
<!DOCTYPE html>
<!--
Author: Rodrigo Zan
Author site: www.rodrigozan.com
-->
<html lang="pt-br">
<head>
<title>Formulário de Login em Janela Modal com Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link para o arquivo Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-default"><!-- Código do NavBar -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><!-- Logo -->
Bootstrap
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#myModal"><!-- Link que abre a janela modal -->
Entrar
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog"><!-- Início do código da janela modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><!-- Header do modal -->
<h4 class="modal-title">Login</h4><!-- Título -->
</div>
<div class="modal-body"><!-- Corpo do modal -->
<form action=""><!-- Início do Formulário -->
<div class="form-group">
<input type="email" class="form-control" placeholder="Digite seu email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Digite sua senha">
</div>
<button class="btn btn-block btn-info">Enviar</button>
</form>
</div>
<div class="modal-footer"><!-- Footer do Modal -->
<button type="button" class="btn btn-default" data-dismiss="modal">
Fechar <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div><!-- ##Fim do Modal -->
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script><!-- Chama a biblioteca JQuery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- Chama o arquivo Bootstrap JavaScript -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment