오픈 한 후 다음 클릭시 모달을 닫는 방법?

Question

나는 popup 클래스로 상승 div에있는 control 링크가 있습니다. 문제는이 클릭이 div 외부에있는 경우 다음 클릭에서이 div를 닫는 방법에 관한 것입니다. 이 순간에이 두 사건이 동시에 발생하고 모달이 나타나지 않습니다. 다음 클릭시에만이 모달을 닫는 방법.

jQuery(document).ready(function(){ 
    jQuery('body').on('click', function(event){ 
     var menu_popup = jQuery('div.popup[data-open-status="true"]'); 

     if(menu_popup.has(event.target).length === 0) 
      menu_popup.hide().attr('data-open-status', 'false'); 
    }); 

    jQuery('a.control').click(function(event){ 
     event.preventDefault(); 
     jQuery('div.popup').show().attr('data-open-status', 'true'); 
    }); 
}); 

Answer 1

클릭 이벤트가 dom을 버블 링하지 않도록해야합니다. Fiddle

jQuery(document).ready(function() { 
    jQuery("a.control").click(function (e) { 
     jQuery("div.popup").show().attr('data-open-status', 'true'); 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }); 

    jQuery(document).click(function (e) { 
     var menu_popup = jQuery('div.popup[data-open-status="true"]'); 
     if (menu_popup.has(e.target).length === 0) menu_popup.hide().attr('data-open-status', 'false'); 
    }); 

    // Add a stopPropagation so that when a user clicks in the div, the event doesn't bubble up to "document" 
    jQuery("div.popup").click(function (e) { 
     e.stopPropagation(); 
    }); 
}); 

그러나 당신이 데이터 속성을 떠날 수 있다는 것을 나에게 나타납니다 http://jsfiddle.net/25xFu/1/

$("a.control").click(function (e) { 
    $("div.popup").slideToggle("fast"); 

    e.preventDefault(); 
    e.stopImmediatePropagation(); 
}); 

$(document).click(function (e) { 
    if ($("div.popup").is(":visible") && !$("div.popup").is(e.target)) { 
     $("div.popup").slideUp("fast"); 
    } 
}); 

$("div.popup").click(function (e) { 
    e.stopPropagation(); 
});