如何做Dropbox喜歡登錄按鈕？

我正在嘗試像登錄按鈕一樣做Dropbox。有一個線程dropbox login popup method in jQuery?但我無法做到這一點。我想，當我按下登錄按鈕一樣dropbox.com如何做Dropbox喜歡登錄按鈕？

這是一個例子中，它被打開。現在它適用於懸停。但我想點擊。我試圖專注，但無法成功。

<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的演示，但我不知道怎麼辦。

來源

2011-12-04 SNaRe

簡單地消除這種規則：

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

然後這塊的jQuery將使上點擊可見：

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

你可以看到這裏的行動：http://jsfiddle.net/jPPew/2/

（我補充保證金所以的jsfiddle「結果」的旗幟不會在點擊的方式得到的。「）

編輯：如果您需要的行爲也是「關閉」登錄區域，如果你點擊其他地方，嘗試這樣的事情：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"); 
});

來源

2011-12-04 01:32:31 Yahel

大。但是現在當我打開它時，它永遠不會關閉。像Dropbox一樣，如果我用鼠標點擊背景，登錄欄消失。 – SNaRe

@SnaRe試試這個：http://jsfiddle.net/jPPew/6/（注意使用不同的選擇'＃login'，而不是'#login了'） – Yahel

謝謝。這是我正在尋找的。但是，如果你有時間，如果可能的話，你可以優化CSS。我認爲它應該是更復雜的。但如果你沒有時間沒有問題。感謝您的解決方案。 – SNaRe

你可以試試這個http://jsfiddle.net/sXmAe/50/

來源

2011-12-04 01:39:27 Nenad

如何做Dropbox喜歡登錄按鈕？

回答

相關問題