Скрыть DIV при щелчке за пределами

Question

У меня есть следующие HTML для всплывающей виджета:

<div id="popup"> 
    <div class="popup-wrapper"> 
     <div class="content"> 
     <h1>TEST</h1> 
     </div> 
    </div> 
</div> 

с помощью CSS: он отображается как NONE:

#popup { 
    display: none; 
    overflow: auto; 
} 

    #popup .popup-wrapper { 
     background-color: #0D1014; 
     background-color: rgba(13,16,20,0.95); 
     height: 100%; width: 100%; 
     position: fixed; top: 0; left: 0; right: 0; bottom 0; 
    } 

    #popup .content { 
     background-color: #E8F0F3; 
     border: 1px solid #FFFFFF; 

     width: 300px; 
     position: fixed; 
     top: 50%; left: 50%; 
     margin-left: -150px; 
     margin-top: -140px; 
     padding: 20px; 
     overflow: hidden; 

     border-radius: 5px 5px 5px 5px; 
     -moz-border-radius: 5px 5px 5px 5px; 
     -webkit-border-radius: 5px 5px 5px 5px; 

     -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); 
     -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); 
     box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); 
    } 

    .no-scroll { 
     overflow: hidden; 
     height: 100%; width: 100%; 
    } 

С JavaScript Всплывающее будет показан, когда нажатии на ссылку:

$(".popup").on('click', function(e) { 
     $("#popup").fadeIn(200); 
     $("body").addClass("no-scroll"); 
    }); 

проблема заключается в том, как скрыть #popup когда нажмите на .popup-wrapper только в nd не .content?

Answer 1

Просто была эта проблема сама 20 мин назад
Код:

$("#popup").on('click', function(e) { 
    if ($(e.target).closest(".content" /*or any other selector here*/).length > 0) {return false;} 
    $("#popup").fadeOut(200); 
    $("body").addClass("no-scroll"); 
}); 

Answer 2

Вы можете предотвратить любые клики по .content из propagating, добавив следующее:

$('.content').click(function(e){ e.stopPropagation() }) 
$('#popup').click(function(){ $(this).fadeOut() }) 

Answer 3

Используйте :not псевдо-селектор отфильтровать .content DIV:

$(".popup-wrapper:not(.content)").click(...) 

Answer 4

Try ниже код:

jQuery('.popup-wrapper').click(function(){ 
    jQuery('#popup').hide(); 
});