Formulario Modal de Login

×

Username Password Remember me

olvido la Password?
Registrar

Formulario Modal, para inicio de seccion, con dos butones, uno de cancelacion y el otro de registro, caso el usuario no este registrado

...

Se compone de 3 partes distintas de programacion:

• Los estilos de CSS que dan estilo al formulario
• El formulario en si constituido por html
• La parte activa de javascript

Codigo de los estilos CSS

 body {
     font-family: Arial, Helvetica, sans-serif;
 }
 /* Full-width input fields */
 input[type=text],
 input[type=password] {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid #ccc;
     box-sizing: border-box;
 }
 /* Set a style for all buttons */
 button {
     background-color: #04AA6D;
     color: white;
     padding: 14px 20px;
     margin: 8px 0;
     border: none;
     cursor: pointer;
     width: 100%;
 }
 button:hover {
     opacity: 0.8;
 }
 /* Extra styles for the cancel button */
 .cancelbtn {
     width: auto;
     padding: 10px 18px;
     background-color: #f44336;
 }
 /* Center the image and position the close button */
 .imgcontainer {
     text-align: center;
     margin: 24px 0 12px 0;
     position: relative;
 }
 img.avatar {
     width: 40%;
     border-radius: 50%;
 }
 .container {
     padding: 16px;
 }
 span.psw {
     float: right;
     padding-top: 16px;
 }
 /* The Modal (background) */
 .modal {
     display: none;
     /* Hidden by default */
     position: relative;
     /* Stay in place */
     margin: auto;
     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: 5% auto 15% auto;
     /* 5% from the top, 15% from the bottom and centered */
     border: 1px solid #888;
     width: 80%;
     /* Could be more or less, depending on screen size */
 }
 /* The Close Button (x) */
 .close {
     position: absolute;
     right: 25px;
     top: 0;
     color: #000;
     font-size: 35px;
     font-weight: bold;
 }
 .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)
     }
 }
 /* Change styles for span and cancel button on extra small screens */
 @media screen and (max-width: 300px) {
     span.psw {
         display: block;
         float: none;
     }
     .cancelbtn {
         width: 100%;
     }
 }
    

Codigo del formulario en html

        <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

<div id="id01" class="modal">

    <form style="width:300px" class="modal-content animate" action="/action_page.php" method="post">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close"
                title="Close Modal">×</span>
            <img style="width:100px" src="https://glenfarrow.co.uk/wp-content/uploads/User-icon.png" alt="Avatar"
                class="avatar">
        </div>

        <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>

            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <button type="submit">Login</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> Remember me
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('id01').style.display='none'"
                class="cancelbtn">Cancel</button>
            <span class="psw">olvido la <a href="#">Password?</a></span><br>
            <a name="" id="" class="btn btn-primary" href="#" role="button">Registrar</a>

        </div>
    </form>
</div>
    

Codigo de javascript

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

Ir al indice

---