jquery - multiple - ¿Cómo escondo un div cuando pierde su foco?

jquery selector

Question

Básicamente, estoy tratando de implementar un inicio de sesión como el del nuevo twitter. Cuando haces clic en Iniciar sesión aparece un div con los campos. Ahora cuando hago clic en cualquier lugar fuera del div (div pierndo el foco), entonces el div debe desaparecer.

He probado la técnica mencionada en Cómo desenfocar el elemento div?

El código es el siguiente

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

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

El problema con eso es el target.id no será igual a loginDialog incluso si hago clic en algún lugar dentro de loginDialog say dentro de un div infantil.

Entonces, lo anterior es una buena dirección a seguir, pero la solución es incompleta.

¿Cuál es la mejor manera de lograr esto?

Answer 1

Es mejor usar el plugin de jquery fancybox para iframe http://fancybox.net/ en el vario ejemplo

[ACTUALIZACIÓN] :: Lo siento por el código hipotético estúpido. verifica el código de trabajo

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

No es una buena práctica pero podría funcionar ...

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

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

Answer 3

Si mover el mouse hacia afuera no es suficiente y desea que desaparezca solo si el usuario hace clic fuera de él, aquí hay un fragmento que podría ayudarlo.

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