如何在失去焦點時隱藏div？

基本上我試圖實現登錄，如新的twitter的。當你點擊登錄時，會彈出一個對話框。現在，當我點擊div（div失去焦點）以外的任何地方時，div應該消失。如何在失去焦點時隱藏div？

我已經試過代碼如下

$("body").click(function(evt) { 

      if (evt.target.id !== 'loginDialog') { 
       $("#loginDialog").hide(); 
      } 
     });

有這個麻煩How to blur the div element?

提到的技術是target.id將不等於甚至一個LoginDialog如果我點擊某處withing說的LoginDialog在子div內。

所以上述是一個很好的方向，但解決方案是不完整的。

達到此目的的最佳方法是什麼？

來源

2011-03-02 shashi

我有一種預感，一些事件冒泡處理代碼將必需的，但從來沒有這樣做之前 – shashi 2011-03-02 09:14:17

如果外移動你的鼠標是不夠的，你想，只有當用戶點擊它外面消失了，這裏有一個片段，它可以幫助你。

$('body').click(function(evt) { 
    if($(evt.target).parents('#loginDialog').length==0) { 
     $('#loginDialog').hide(); 
    } 
});

來源

2011-03-02 09:23:04 pestaa

好的，方法是對的，但我做了一些調整。而不是$（this）我使用$（evt.target），因爲$（this）總是被body引用，所以它的父類是html。此外，我使用的比較是.length！= 0，並將logindialog隱藏在else條件中。 – shashi 2011-03-02 10:21:20

你是對的，我沒有考慮過。抱歉。我爲後續訪問者修復它。 – pestaa 2011-03-02 19:26:57

更好在各種示例

[UPDATE] ::對不起笨假想代碼使用jquery的fancybox插件的iframe http://fancybox.net/。檢查工作代碼

<script type="text/javascript"> 
    $(function(){ 
     $(document).click(
      function (e){ 
       var blur = $('#blur'); 
       var position = $(blur).position(); 
       var height = $(blur).height(); 
       var width = $(blur).width(); 

       if((e.clientX > position.left && e.clientX < position.left + width) && 
        (e.clientY > position.top && e.clientY < position.left + height) 
       ){ 
        alert(e.clientX+' '+e.clientY); 

       } 
       else{  
        /*Hide the div*/      
         $('#blur').hide(); 
        /*Hide the div*/ 

       } 


      } 
     ) 
    }) 
</script> 
<div id="blur">Blur me</div>

來源

2011-03-02 09:15:03

不解僱div的模糊事件所以這不起作用。 – shashi 2011-03-02 10:22:07

@sassyboy檢查更新的代碼 – 2011-03-02 10:23:19

這也是一個好方法，但是pestaa的代碼只是幾行代碼，所以我讓它成爲答案。儘管我已經提出了你的答案！ – shashi 2011-03-02 13:06:30

不是一個好practce但可能工作...

$('body').click(function(){ 
    $('#loginDialog').hide();  

}); 
$('#loginDialog').click(function(evt){ 
    evt.stopPropagation(); 
});

來源

2011-03-02 09:31:57

如何在失去焦點時隱藏div？

回答

相關問題