Как сделать Dropbox как кнопку входа в систему?

Question

Я пытаюсь сделать Dropbox как кнопку входа в систему. В jQuery был поток метод входа в Dropbox? , но я не смог что-то сделать с этим. Я хочу, чтобы он открывался, когда я нажимал кнопку входа в систему так же, как dropbox.com

Это пример кода. Теперь это работает на зависании. Но я хочу по клику. Я попытался сосредоточиться, но не смог добиться успеха.

<div id="login">
    <a href="#">Login</a>
    <div>
        Login Form
        Lorem Ipsum blablbalbabababa lbablaabalbalba
    </div>
</div>

И

div#login {
    position: relative;
    float: right;
    height: 20px;
    padding: 5px;
}
div#login:focus {
    background: rgba(0,0,0,.2);
}
div#login div {
    position: absolute;
    top:30px;
    right:0;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: rgba(0,0,0,.2);
    visibility: hidden;
}
div#login:focus div {
    visibility: visible;
}

Это демонстрационная версия этого кода http://jsfiddle.net/sXmAe/

Возможно, с Jquery это проще, но я не знаю как.

Answer 1

Просто исключите это правило:

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

А затем этот кусок jQuery сделает его видимым при клике:

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

Вы можете увидеть это действие здесь: http://jsfiddle.net/jPPew/2/

(Я добавил поле, чтобы баннер JSFiddle "Result" не мешал клику. ")

РЕДАКТИРОВАТЬ: Если вам требуется, чтобы поведение также «закрывало» область входа в систему, если вы щелкнули в другом месте, попробуйте что-то вроде этого: 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");
});

Answer 2

Вы можете попробовать это http://jsfiddle.net/sXmAe/50/