Hot File

Create Popup Login Form with HTML5, CSS3 and jQuery

View: 1772    Dowload: 0   Comment: 0   Post by: admin  
Author: none   Category: HTML-CSS template   Fields: Other

0 point/2 review File has been tested

Enlist a little time morning, I will share with you a pop up effects for the form to login. With this, you will be able to apply to the primary site or your blog. Login form will be built using HTML5 with automatic verification data (validated), formatted with CSS3 and jQuery effects with pop ups.

Introduction

Enlist a little time morning, I will share with you a pop up effects for the form to login. With this, you will be able to apply to the primary site or your blog. Login form will be built using HTML5 with automatic verification data (validated), formatted with CSS3 and jQuery effects with pop ups.

HTML5

First, we build html standard framework as follows:

<div class="overlay" style="display: none;">
    <div class="login-wrapper">
        <div class="login-content">
            <a class="close">x</a>
            <h3>Sign in</h3>
            <form method="post" action="login.php">
                <label for="username">
                    Username:
                    <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{8,20}$" required="required" />
                </label>
                <label for="password">
                    Password:
                    <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required="required" />
                </label>
                <button type="submit">Sign in</button>
            </form>
        </div>
    </div>
</div>

In the inner html, you can change the value check data entered in eggs attribute pattern. To be able to call this login form, you insert the following link into any location on the site that you want users to click on.

<a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a>

CSS

You can use the following code to format the form to login.

/*
*   LOG-IN BOX
*/
div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
 
    div.overlay > div.login-wrapper {
        align-self: center;
        background-color: rgba(0,0,0,.25);
        border-radius: 2px;
        padding: 6px;
        width: 450px;
    }
     
        div.overlay > div.login-wrapper > div.login-content {
            background-color: rgb(255,255,255);
            border-radius: 2px;
            padding: 24px;  
            position: relative;
        }
         
            div.overlay > div.login-wrapper > div.login-content > h3 {
                color: rgb(0,0,0);
                font-family: 'Varela Round', sans-serif;
                font-size: 1.8em;
                margin: 0 0 1.25em;
                padding: 0;
            }
/*
*   FORM
*/
form label {
    color: rgb(0,0,0);
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: 1.25em;
    margin: .75em 0;    
}
 
    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="search"],
    form input[type="password"],
    form textarea {
        background-color: rgb(255,255,255);
        border: 1px solid rgb( 186, 186, 186 );
        border-radius: 1px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        display: block;
        font-size: .65em;
        margin: 6px 0 12px 0;
        padding: .8em .55em;    
        text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
        transition: all 400ms ease;
        width: 90%;
    }
     
    form input[type="text"]:focus,
    form input[type="email"]:focus,
    form input[type="number"]:focus,
    form input[type="search"]:focus,
    form input[type="password"]:focus,
    form textarea:focus,
    form select:focus { 
        border-color: #4195fc;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
    }
     
        form input[type="text"]:invalid:focus,
        form input[type="email"]:invalid:focus,
        form input[type="number"]:invalid:focus,
        form input[type="search"]:invalid:focus,
        form input[type="password"]:invalid:focus,
        form textarea:invalid:focus,
        form select:invalid:focus { 
            border-color: rgb(248,66,66);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
        }
     
form button {
    background-color: #50c1e9;
    border: 1px solid rgba(0,0,0,.1);
    color: rgb(255,255,255);
    font-family: 'Varela Round', sans-serif;
    font-size: .85em;
    padding: .55em .9em;
    transition: all 400ms ease; 
}
 
    form button:hover {
        background-color: #1bc5b3;
        cursor: pointer;
    }

jQuery

Finally, to form login appear as pop ups, you should use this script:

$(document).ready(function() {
    $("#loginLink").click(function( event ){
        event.preventDefault();
        $(".overlay").fadeToggle("fast");
    });
     
    $(".overlayLink").click(function(event){
        event.preventDefault();
        var action = $(this).attr('data-action');
         
        $.get( "ajax/" + action, function( data ) {
            $( ".login-content" ).html( data );
        }); 
         
        $(".overlay").fadeToggle("fast");
    });
     
    $(".close").click(function(){
        $(".overlay").fadeToggle("fast");
    });
     
    $(document).keyup(function(e) {
        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) { 
            event.preventDefault();
            $(".overlay").fadeToggle("fast");
        }
    });
});

That was it, I hope that you can be creative and more for form login format nicer and more attractive.

Good luck !

Create Popup Login Form with HTML5, CSS3 and jQuery

Create Popup Login Form with HTML5, CSS3 and jQuery Posted on 02-12-2015  Enlist a little time morning, I will share with you a pop up effects for the form to login. With this, you will be able to apply to the primary site or your blog. Login form will be built using HTML5 with automatic verification data (validated), formatted with CSS3 and jQuery effects with pop ups. 5/10 1772

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd