如何做Dropbox喜欢登录按钮？ [英] How to do Dropbox Like Login Button?

问题描述

我正在尝试像登录按钮这样的Dropbox。
在jQuery中有一个线程 dropbox登录弹出方法，但是我不能做这件事。
我希望在按下与dropbox.com相同的登录按钮时打开它

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 login button same as dropbox.com

这是一个示例代码。现在它工作在悬停。但我想点击。我试着焦点，但不能成功。

This is an example code. Now it works on hover. But I want on click. I tried focus but couldn't succeed.

<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比较容易，但我不知道怎么样。

Probably it is easier with Jquery but I don't know how.

推荐答案

只需删除此规则：

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

然后这个jQuery会使它在点击时可见：

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

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

您可以在这里看到它的操作： http://jsfiddle.net/jPPew/2/

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.")

编辑：如果您要求该行为还关闭登录区域，如果您点击其他，尝试这样： http://jsfiddle.net/jPPew/6/

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

这篇关于如何做Dropbox喜欢登录按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！