div가 포커스를 잃었을 때 div를 숨기는 방법은 무엇입니까?

Question

기본적으로 새로운 트위터와 같은 로그인을 구현하려고합니다. 로그인을 클릭하면 div가 필드와 함께 나타납니다. 이제 div (div가 사라지는 포커스) 외부의 아무 곳이나 클릭하면 div가 사라집니다. 내가 말하는 곳 loginDialog withing에 클릭하면

내가 How to blur the div element?

에서 언급 된 기술이 코드는

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

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

그의 문제점을 다음과 같다을 시도

는 target.id 동일하지 심지어 loginDialog하는 것입니다 자식 div 내에서.

위의 내용은 앞으로 나아갈 수있는 좋은 방향이지만 해결책은 불완전합니다.

이것을 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

을 확인하고 당신이 그것을 사용자가 외부 그것을 클릭 할 경우에만 사라지게하려면, 여기에 당신을 도울 수있는 코드 조각입니다.

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

Answer 2

더 나은는 다양한 예를

[업데이트] :: 바보 가상 코드에 대한 죄송에 iframe을 http://fancybox.net/에 대한 JQuery와 fancybox 플러그인을 사용합니다. 외부 마우스를 움직이는 것만으로는 충분하지 않은 경우 작업 코드

<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

하지 그런 좋은 practce하지만 작동 할 수 있습니다 ...

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

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