Para crear un formulario de registro, de login o otro tipo y que sea modal, procedemos de la seguinte manera
1º-Creamos la estrutura del documento
Codigo de la estrutura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Si ya tenemos la estrutura, por ejemplo la cabecera incluida, porque la tenemos en una seccion, entonces solo necesitamos el formulario
2º Creamos el formulario de login,
...
Formulario de Login MODAL
Codigo de login modal
<form action="action_page.php" method="post">
<div class="imgcontainer">
<div class="separator" style="clear: both;"><a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPAbCaKnyv2PsDCQnQZEr7ftY9h47OZbxdio7n4uL2FYtE7TnElYdacQ3kVFeQtmR4_rmzrPPC9eBMHikZHSQP25j40kyBKt3Uj6BnB4OEsTHz0S-413KD7kPO-7Tt3AdvERso5ePS_490PWOyjkcL35KZxTiyXdWvWw1b7rNcAgA1rucjEx_q2U-/s499/img_avatar2.png"
style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="200"
data-original-height="498" data-original-width="499"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPAbCaKnyv2PsDCQnQZEr7ftY9h47OZbxdio7n4uL2FYtE7TnElYdacQ3kVFeQtmR4_rmzrPPC9eBMHikZHSQP25j40kyBKt3Uj6BnB4OEsTHz0S-413KD7kPO-7Tt3AdvERso5ePS_490PWOyjkcL35KZxTiyXdWvWw1b7rNcAgA1rucjEx_q2U-/s200/img_avatar2.png" /></a>
</div>
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required><br><br>
<button type="submit">Login</button>
<button type="button" class="cancelbtn">Cancel</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
Los estilos del formulario
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto; /* 15% from the top and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
E por ultimo el script del modal, se pone al final antes de que se cierre el body
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias