Comment cacher une div lorsqu'elle perd son focus?

Question

Fondamentalement, j'essaye d'implémenter un login tel que celui du nouveau twitter. Lorsque vous cliquez sur Sign In, une div apparaît avec les champs. Maintenant, quand je clique n'importe où en dehors de la div (div perdre la mise au point) alors la div devrait disparaître.

J'ai essayé la technique mentionnée à How to blur the div element?

Le code est le suivant

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

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

Le problème avec c'est le target.id ne sera pas égale à loginDialog même si je clique withing quelque part loginDialog dire dans un enfant div.

Donc, ce qui précède est une bonne direction à suivre vers, mais la solution est incomplète.

Quelle est la meilleure façon d'y parvenir?

Answer 1

Si vous déplacez la souris ne suffit pas à l'extérieur et que vous voulez faire disparaître que si l'utilisateur clique en dehors de celui-ci, voici un extrait qui pourrait vous aider.

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

Answer 2

Il vaut mieux utiliser le plugin jquery fancybox pour iframe http://fancybox.net/ dans les différents exemple

[UPDATE] :: Désolé pour le code hypothétique stupide. vérifier le code de travail

<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> 

Answer 3

pas une bonne practce mais pourrait fonctionner ...

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

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