Create a Popup HTML Login Box with jQuery

Registration and log-in forms are both very common features of websites. As users don’t like constantly loading pages, webmasters are finding themselves calling the forms with Javascript and overlaying them over the page content. This article takes you through how to achieve this in a simple manner with HTML, CSS 3, and jQuery. It’s perfect for any PHP user system.

Recently I received an email from a visitor asking me –

Hey Adam, can you tell me how to make a login and sign in (tab wise) popout using html5 css3 jquery and ajax?

With HTML, CSS, and jQuery login boxes being a popular topic, I thought I’d give it a shot.

Creating a popup / popover box requires HTML, CSS, and jQuery (Javascript). I’ll take you through how to create a very basic version, then look at how to improve it for other uses.

Update Note

Following a lot of requests from you guys I’ve decided to update this file and further explain how to use AJAX to load multiple files. This should clear up any confusion about how it works. Enjoy!

Getting Started

As per usual, we need to reset the browser CSS and import and additional fonts we may wish to use. For this tutorial I’m going to use Open Sans and Varela Round, both available from Google Font.

Google Font import:

link href='http://fonts.googleapis.com/css?family=Varela+Round|Open+Sans:400,300,600' rel='stylesheet' type='text/css'

CSS Reset & default site styling:

/*
*    RESET
*/
*{
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 0;
}

*:after,
*:before {
    box-sizing: border-box;
}

/*
*    GLOBAL
*/
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    background-color: #f3f3f3;
    color: rgb(165,165,165);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

Both the body and HTML styles can be changed to whatever you want; they have little impact on the desired outcome for the CSS & jQuery login box.

Finally, we need to include jQuery on our page. I’m going to use a jQuery link, but you can also use a local version. The version I’m linking to is v1.10, later versions will also work.

Latest jQuery v1.10 link:

src="http://code.jquery.com/jquery-latest.min.js"

Creating the CSS Overlay

First of all we need to create an overlay element and a log-in box container.

The overlay box is the CSS effect that adds a black tint over the rest of the content, making our box stand out. This is very simple CSS, utilising position and background-color.

As the styling has two different parts, I’m going to separate my explanation.

Let’s look at the positioning and coloring first.

div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

Let’s break that down –

• background-color: rgba(0,0,0,.25) – using RGBA allows us to specify a color and alpha value, alpha being the opacity of that color.
• bottom: 0 – position the element at the bottom of the page
• left: 0 – position the element at the left of the page
• position: fixed – this means scrolling won’t have an effect on the elements position on the page
• top: 0 – position the element at the top of the page
• width: 100% – the element fills the width of the page

The second part of the style definition involves CSS 3 flexbox, making it much easier to position elements inside our overlay container. Let’s take a look –

div.overlay {
    display: flex;
    justify-content: center;
}

Flexbox explained –

• display: flex – defines the flex container, either inline-flex or block (flex).
• justify-content: center – centers the content absolute center

Note: At the time of writing this there isn’t full support for flexbox across all major browsers – waiting for older browsers to be forced to upgrade! If you want to cover yourself then you should prefix flexbox CSS to ensure it works universally. This is done like so –

div.overlay {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

With that being said, here’s our final overlay code –

div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

Styling the HTML 5 & CSS Log-in Box

Now we have our overlay container, we need to fill it with our log-in box. A common feature of these log-in forms is a semi-opaque border. We’re going to use a container element to achieve this, but you could simply use a border to achieve a similar effect.

div.overlay > div.login-wrapper {
    align-self: center;
    background-color: rgba(0,0,0,.25);
    border-radius: 2px;
    padding: 6px;
    width: 450px;
}

Most of the CSS is self explanatory. Once again we’ve used a background-color with rgba values, which gives us a nice opaque effect. border-radius also gives us a nice CSS rounded corner on the log-in box container.

The definition that should stand out is align-self, as it’s pretty new. This is to do with our flexbox. align-self specifies the horizontal alignment of the element, and we want it absolute center.

Next we move on to the content area. So far we’ve only dealt with semi-opaque backgrounds, so it’s time to use something solid.

div.overlay > div.login-wrapper > div.login-content {
    background-color: rgb(255,255,255);
    border-radius: 2px;
    padding: 24px;
    position: relative;
}

Again, very self explanatory. We’re using a solid white background, hence only rgb instead of rgba. A 24px padding is a personal preference, change it to match the look and feel you desire.

The important part of this rule is the position definition. The reason for this will become clearer later on, but it’s needed when using absolutely positioned elements within the container – this will be our close button.

Finally we need to style the contained heading (h3) within the log-in box. This isn’t required, but is part of my end result.

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

To make the heading stand out I’m using a black rounded font at 1.8em. Using 1.8em makes the font size relative to the document font size, known as font elasticity.

Creating a Close Button

As mentioned earlier, we need to create a close button that’s positioned absolute within our log-in container. This is done like so –

a.close {
    background-color: rgb(204,204,204);
    border-radius: 50%;
    color: rgb(255,255,255);
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: .8em;
    padding: .2em .5em;
    position: absolute;
    top: 1.25rem;
    transition: all 400ms ease;
    right: 1.25rem;
}

    a.close:hover {
        background-color: #1bc5b3;
        cursor: pointer;
    }

Sorry for the block of code! Here’s an explanation of the key points –

• background-color – we’re using a nice light grey background for a simplistic effect
• border-radius – as we’re creating a circle, we want the border radius to be 50% of the height
• position: absolute – position the button/link absolutely, but due to the relatively positioned container, all positions are relative to that
• top – the distance from the top of the log-in box – rem is relative elasticity, which refers to global font sizes
• transition – animate all definitions; for 400ms; using ease
• right – the distance from the right of the log-in box

The second definition uses the :hover CSS selector, telling the browser what to do when the user is hovering over the element. This will give the button a nice green background, and change the mouse to make it look clickable – nice trick ey!

Styling the Log-in Form

I’ve previously created a tutorial specifically for styling a HTML 5 and CSS 3 log-in form – found here. The code used below is almost identical to this tutorial, with only minor tweaks to make it fit a different look.

Below is the CSS for our log-in 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);
        }

Firstly we’ve defined styles for our form labels. These allow users to click text and be directed to the corresponding form field. The label element works directly with the id attribute of the inputs.

Next we style the default form elements/inputs. I’ve specified an inset box-shadow to give the inputs a nice inner-shadow.

Using the :focus CSS selector allows us to specify what the input looks like when the user has their cursor inside it. Let’s let them know they’ve selected it.

Finally, we style the inputs using the :invalid CSS selector. When the user clicks in the input and it doesn’t pass the required pattern, this is the style it’ll take on.

Again, if you seek a deeper explanation of the log-in form CSS, please view my other tutorial here.

Styling the Log-in Button

Button styling is very simple and can add great flair to your design; but many developers ignore this. Don’t be one of them.

The button style doesn’t encompass anything new, so should be easy to follow what’s going on. The rule itself describes a button element that’s contained within a form element.

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

The button is using a nice blue background, with a semi-opaque darker border. This trick means we don’t need to change the border-color when we change the background. We’ve also set the standard transition/CSS-animation to the button for when we change the background color.

Similar to the close button, we want to change the background color and mouse, making the button look clickable.

Log-in Form HTML

Most of this post so far has revolved around CSS. Now it’s time to quickly look at the HTML.

The log-in form is using HTML 5 elements, so make sure your doctype is correct –

<!doctype html>

If you’re looking for better backwards compatibility with browsers and HTML 5, then include this Javascript link in your document head

<!--HTML 5 + IE HACK--><!--[if lt IE 9]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shim.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><![endif]-->

Here’s the full log-in form HTML –

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

It’s important to note the style="display: none;" attribute that’s associated with the overlay box. This is very important when it comes to the Javascript/jQuery.

When using this on a full site, you should place the code just inside of your body element. It doesn’t need to be contained by anything else.

Log-in Box jQuery/Javascript

As mentioned earlier, we’re going to use the jQuery library to create the desired pop-up effect. This is a very common effect on the web, used by sites such as Facebook and Twitch.tv.

It’s important to wrap our jQuery functions within a function that loads once the document is ready. This prevents Ajax code from slowing down the loading time of your webpage – load times are very important in Google PageRank. This is done like so –

$(document).ready(function() {
// code goes here
});

To create our fade effect we want to use the fadeToggle functionality of jQuery. This makes our lives so much easier when animating such elements.

What we want to do is use fadeToggle when the log-in link is clicked. This is therefore using the click jQuery event.

$(document).ready(function() {
    $("#loginLink").click(function(event){
        // code goes here
      });
});

The above code will run the encased function when an element with an ID of loginLink is clicked. To tell it what to do once it’s clicked we need to do –

$(document).ready(function() {
    $("#loginLink").click(function(event){
        event.preventDefault();
        $(".overlay").fadeToggle("fast");
    });
});

Using the preventDefault() jQuery function we can stop the link from redirecting the user. This provides great fall-back functionality for developers who could also link to the log-in page like so –

<a href="login.php" id="loginLink">Login</a>

With this simple function in place we want to duplicate the functionality for the close link.

$(document).ready(function() {
    $(".close").click(function(){
        $(".overlay").fadeToggle("fast");
    });
});

We don’t need to use preventDefault() here because there’s no external link provided by the close button.

Finally, let’s make it so the user can press the ESC key to close the box –

$(document).ready(function() {
    $(document).keyup(function(e) {
        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) {
            event.preventDefault();
            $(".overlay").fadeToggle("fast");
        }
    });
});

Importantly with this function is the if statement. First of all it checks if the user has pressed the ESC key (key code 27). As we don’t want the user to open the box by pressing ESC, we need to check if the overlay box is being displayed or not. This is done by using the CSS jQuery function.

Simples.

Here’s all of my jQuery in 1 bitesize piece –

$(document).ready(function() {
    $("#loginLink").click(function( event ){
        event.preventDefault();
        $(".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");
        }
    });
});

AJAX & HTML 5 Log-in Form

What happens if you want to take this form one step further? You may also want to include a registration form in an identical box. Here’s how you can do it without duplicating any code and using a jQuery GET AJAX request.

$(".overlayLink").click(function(event){
    event.preventDefault();
    var action = $(this).attr('data-action');

    $("#loginTarget").load("ajax/" + action);

    $(".overlay").fadeToggle("fast");
});

Wow, lots of explaining to do. Firstly I’ve created a new class for our log-in and register links called “overlayLink”. Once an element with that class is clicked, the function will run.

As above, we first of all want to prevent the links from doing anything else. Let’s use preventDefault(). Next we want to find out what page we want to get. This has been specified in the data-action HTML attribute.

Now we get our specified page/form code. This will look in the folder ajax/ for the page corresponding to the link clicked. It’ll then place the result inside the element with a class login-content.

The page ajax/login-form.html would look like this –

<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 />
    </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 />
    </label>
    <button type="submit">Sign in</button>
</form>

The links to call the AJAX request would look like so –

<ul>
<li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>
<li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li>
</ul>

Next you can create a file ajax/registration-form.html that looks like so –

<a class="close">x</a>
<h3>Register</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 />
    </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 />
    </label>
    <label for="email">
        Email:
        <input type="email" name="email" id="email" placeholder="Your Email Address" required />
    </label>
    <label for="cpassword">
        Confirm Password:
        <input type="password" name="cpassword" id="cpassword" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required />
    </label>
    <button type="submit">Register</button>
</form>

Now you may be wondering, how does this work?

Each link has an attribute data-action, this references a file in the ajax/ folder and loads it into the overlay. To add more files all you need to do is create it in ajax/yourfile.html and set data-action="yourfile.html".

Conclusion & Code

Thanks for reading, I hope it’s been beneficial. As always, post the links to your results below.

Here’s the full code –

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5, CSS 3, jQuery Log-in & Registration</title>
link href='http://fonts.googleapis.com/css?family=Varela+Round|Open+Sans:400,300,600' rel='stylesheet' type='text/css'
script src="http://code.jquery.com/jquery-latest.min.js"/script
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');

        $("#loginTarget").load("ajax/" + action);

        $(".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");
        }
    });
});
/script
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%2F*%3Cbr%20%2F%3E%0A*%20%20%20%20RESET%3Cbr%20%2F%3E%0A*%2F%3Cbr%20%2F%3E%0A*%7B%3Cbr%20%2F%3E%0A%20%20%20%20box-sizing%3A%20border-box%3B%3Cbr%20%2F%3E%0A%20%20%20%20margin%3A%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20outline%3A%20none%3B%3Cbr%20%2F%3E%0A%20%20%20%20padding%3A%200%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E*%3Aafter%2C%3Cbr%20%2F%3E%0A*%3Abefore%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20box-sizing%3A%20border-box%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E%2F*%3Cbr%20%2F%3E%0A*%20%20%20%20GLOBAL%3Cbr%20%2F%3E%0A*%2F%3Cbr%20%2F%3E%0Ahtml%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20font-size%3A%2016px%3B%3Cbr%20%2F%3E%0A%20%20%20%20-webkit-text-size-adjust%3A%20100%25%3B%3Cbr%20%2F%3E%0A%20%20%20%20-ms-text-size-adjust%3A%20100%25%3B%3Cbr%20%2F%3E%0A%20%20%20%20text-rendering%3A%20optimizeLegibility%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Ebody%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20background-color%3A%20%23f3f3f3%3B%3Cbr%20%2F%3E%0A%20%20%20%20color%3A%20rgb(165%2C165%2C165)%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-family%3A%20%22Open%20Sans%22%2C%20Arial%2C%20Helvetica%2C%20sans-serif%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-weight%3A%20400%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Ea.close%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20background-color%3A%20rgb(204%2C204%2C204)%3B%3Cbr%20%2F%3E%0A%20%20%20%20border-radius%3A%2050%25%3B%3Cbr%20%2F%3E%0A%20%20%20%20color%3A%20rgb(255%2C255%2C255)%3B%3Cbr%20%2F%3E%0A%20%20%20%20display%3A%20block%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-family%3A%20'Varela%20Round'%2C%20sans-serif%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-size%3A%20.8em%3B%3Cbr%20%2F%3E%0A%20%20%20%20padding%3A%20.2em%20.5em%3B%3Cbr%20%2F%3E%0A%20%20%20%20position%3A%20absolute%3B%3Cbr%20%2F%3E%0A%20%20%20%20top%3A%201.25rem%3B%3Cbr%20%2F%3E%0A%20%20%20%20transition%3A%20all%20400ms%20ease%3B%3Cbr%20%2F%3E%0A%20%20%20%20right%3A%201.25rem%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20a.close%3Ahover%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20background-color%3A%20%231bc5b3%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%2F*%3Cbr%20%2F%3E%0A*%20%20%20%20LOG-IN%20BOX%3Cbr%20%2F%3E%0A*%2F%3Cbr%20%2F%3E%0Adiv.overlay%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20background-color%3A%20rgba(0%2C0%2C0%2C.25)%3B%3Cbr%20%2F%3E%0A%20%20%20%20bottom%3A%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20display%3A%20flex%3B%3Cbr%20%2F%3E%0A%20%20%20%20justify-content%3A%20center%3B%3Cbr%20%2F%3E%0A%20%20%20%20left%3A%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20position%3A%20fixed%3B%3Cbr%20%2F%3E%0A%20%20%20%20top%3A%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20width%3A%20100%25%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20div.overlay%20%3E%20div.login-wrapper%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20align-self%3A%20center%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20background-color%3A%20rgba(0%2C0%2C0%2C.25)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20border-radius%3A%202px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20padding%3A%206px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20width%3A%20450px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20%20%20%20%20div.overlay%20%3E%20div.login-wrapper%20%3E%20div.login-content%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20rgb(255%2C255%2C255)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%202px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2024px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20%20%20%20%20%20%20%20%20div.overlay%20%3E%20div.login-wrapper%20%3E%20div.login-content%20%3E%20h3%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20rgb(0%2C0%2C0)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20'Varela%20Round'%2C%20sans-serif%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%201.8em%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%200%201.25em%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3Cbr%20%2F%3E%0A%2F*%3Cbr%20%2F%3E%0A*%20%20%20%20FORM%3Cbr%20%2F%3E%0A*%2F%3Cbr%20%2F%3E%0Aform%20label%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20color%3A%20rgb(0%2C0%2C0)%3B%3Cbr%20%2F%3E%0A%20%20%20%20display%3A%20block%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-family%3A%20'Varela%20Round'%2C%20sans-serif%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-size%3A%201.25em%3B%3Cbr%20%2F%3E%0A%20%20%20%20margin%3A%20.75em%200%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20form%20input%5Btype%3D%22text%22%5D%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22email%22%5D%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22number%22%5D%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22search%22%5D%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22password%22%5D%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20textarea%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20background-color%3A%20rgb(255%2C255%2C255)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20rgb(%20186%2C%20186%2C%20186%20)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20border-radius%3A%201px%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20box-shadow%3A%20inset%200%201px%202px%20rgba(0%2C%200%2C%200%2C%200.08)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20display%3A%20block%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20font-size%3A%20.65em%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20margin%3A%206px%200%2012px%200%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20padding%3A%20.8em%20.55em%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20text-shadow%3A%200%201px%201px%20rgba(255%2C%20255%2C%20255%2C%201)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20transition%3A%20all%20400ms%20ease%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20width%3A%2090%25%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20form%20input%5Btype%3D%22text%22%5D%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22email%22%5D%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22number%22%5D%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22search%22%5D%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20input%5Btype%3D%22password%22%5D%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20textarea%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20form%20select%3Afocus%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20border-color%3A%20%234195fc%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20box-shadow%3A%20inset%200%201px%202px%20rgba(0%2C%200%2C%200%2C%200.1)%2C%200%200%208px%20%234195fc%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20%20%20%20%20form%20input%5Btype%3D%22text%22%5D%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20input%5Btype%3D%22email%22%5D%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20input%5Btype%3D%22number%22%5D%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20input%5Btype%3D%22search%22%5D%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20input%5Btype%3D%22password%22%5D%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20textarea%3Ainvalid%3Afocus%2C%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20form%20select%3Ainvalid%3Afocus%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20rgb(248%2C66%2C66)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20inset%200%201px%202px%20rgba(0%2C%200%2C%200%2C%200.1)%2C%200%200%208px%20rgb(248%2C66%2C66)%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%7D%3C%2Fp%3E%0A%3Cp%3Eform%20button%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20background-color%3A%20%2350c1e9%3B%3Cbr%20%2F%3E%0A%20%20%20%20border%3A%201px%20solid%20rgba(0%2C0%2C0%2C.1)%3B%3Cbr%20%2F%3E%0A%20%20%20%20color%3A%20rgb(255%2C255%2C255)%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-family%3A%20'Varela%20Round'%2C%20sans-serif%3B%3Cbr%20%2F%3E%0A%20%20%20%20font-size%3A%20.85em%3B%3Cbr%20%2F%3E%0A%20%20%20%20padding%3A%20.55em%20.9em%3B%3Cbr%20%2F%3E%0A%20%20%20%20transition%3A%20all%20400ms%20ease%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E%20%20%20%20form%20button%3Ahover%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20background-color%3A%20%231bc5b3%3B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3Cbr%20%2F%3E%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>

<body>
<div class="test"></div>

Here's some content.

<a href="login.php" id="loginLink">Login</a>
<ul>
<li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>
<li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li>
</ul>
<div class="overlay" style="display: none;">
<div class="login-wrapper">
<div class="login-content" id="loginTarget">
            <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 />
                </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 />
                </label>
                <button type="submit">Sign in</button>
            </form>
</div>
</div>
</div>

</body>
</html>