How To Do Dropbox Like Login Button?

I'm trying to do Dropbox like login button. There was a thread dropbox login popup method in jQuery? but I couldn't do something on this. I want it to be opened when I press the l

Solution 1:

Simply eliminate this rule:

div#login:focus div {
    visibility: visible;
}

And then this piece of jQuery will make it visible on click:

$("#login a").click(function(){
    $("#login div").css("visibility","visible");
});

You can see it action here: http://jsfiddle.net/jPPew/2/

(I added a margin so the JSFiddle "Result" banner wouldn't get in the way of the click.")

EDIT: If you require that the behavior also "close" the login area if you click elsewhere, try something like this: http://jsfiddle.net/jPPew/6/

$("#login").click(function(e){
    $("#login div").css("visibility","visible");
    e.stopPropagation();
});

$("body").click(function(e){
    $("#login div").css("visibility","hidden");
});

Solution 2:

You can try this http://jsfiddle.net/sXmAe/50/