jQuery Tutorial: Making a login popup/dropdown box fade in with only jQuery and CSS

Today I’ll be showing you how to make a popout login box for your website using jQuery and CSS. This is a common technique that I’ve seen and used across the web and is actually very easy to implement with jQuery.

Click here for a demo of what we’ll be building.

First we need to setup some base styles so everything looks pretty. Click here to download the base project files which we’ll be using as a starting point for the tutorial. This includes the initial HTML, CSS and jQuery files to help us get started.

If you load up index.html in your browser you will see a login box just hanging out in the layout. First thing we need to do is position this login box so that it is sitting on top of the other content on the page. We do this via absolute positioning:

#login_box {
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now the login box is sitting on top of the content in the spot that we want. Since this login box needs to not be visible until the “Login” button is clicked, we add display: none; to #login_box in style.css:

#login_box {
	display:none;
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now open up js/login.js. First thing we need to do is make this login box fade in when the “Login” button is clicked:

$(document).ready(function() {
    $(".login_btn").click(function() {
        $("#login_box").fadeIn();
    });
});

The login box will now appear when the “Login” button is clicked. However, we need to be able to close the login box by clicking the same “Login” button again. The code for this is actually quite simple:

First we create a variable for #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
         var loginBox = $("#login_box");
    });
});

Then we add a simple if/else statement to determine the current state of #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
});

Now we are able to show/hide our login box with ease. At this point the login popup box functions quite well but still has an obvious limitation. The user must click the “Login” button in order to close the login box. This box will not close by simply clicking outside of it. This functionality is a little bit tricky but is still only a few lines of code:

First we set a variable at the beginning of login.js:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
...

Then just before the end of the document ready statement we create an if/else statement which sets mouse_is_inside to true or false depending on if the user’s mouse is inside or outside of the login popup box:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
})l

Directly after that we create a function which fades out the login popup box if the user’s mouse clicks outside of the popup:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
 
    $("body").click(function(){
        if(! mouse_is_inside) $("#login_box").fadeOut("fast");
    });
});

What this does is, when a click occurs on the body of the website, we check to see if the mouse is clicking inside of the login box. If so, we do nothing, if we are outside the login box, we close it.

Click here for the project files for the final product

And we’re done! What rocks about jQuery is that things like this can be created in a matter of minutes. It’s very convenient and speeds up development time drastically! So, would you do anything different? Did I miss something? Let me know in the comments section below. Thanks for reading!