jQuery: Nascondi popup se il clic viene rilevato altrove

Question

Sto tentando di nascondere un div se l'utente fa clic ovunque MA il popup O sono figli. Questo è il codice che ho finora:

$("body").click(function(){ 
    var $target = $(event.target); 
    if(!$target.is(".popup") || !$target.is(".popup").children()){ 
     $("body").find(".popup").fadeOut().removeClass('active'); 
    } 
}); 

Si lavora per il div .popup, ma se da suoi figli sono cliccato, nasconde comunque.

Answer 1

Si potrebbe davvero semplificare questo un po 'penso:

// If an event gets to the body 
$("body").click(function(){ 
    $(".popup").fadeOut().removeClass("active"); 
}); 

// Prevent events from getting pass .popup 
$(".popup").click(function(e){ 
    e.stopPropagation(); 
}); 

Cliccando sulla comparsa, o uno dei suoi figli causerà la propagazione di fermarsi prima di raggiungere il corpo.

Demo di fermare evento-propagazione: http://jsbin.com/ofeso3/edit

Answer 2

Spazzolare la logica booleana! :)

if(!$target.is(".popup") && !$target.parents().is(".popup")) 

Answer 3

Stiamo usando questo per mostrare un popup sullo scatto e poi nasconderlo una volta che si fa clic di nuovo lo stesso tasto o clic al di fuori.

function togglePopup(){ 
    var selector = '#popup', 
    $popup = $(selector), 
    callback = function(e) { 
     if (!$(e.target).parents().andSelf().is(selector)) { 
     $popup.hide(); 
     $(document).off('click', callback); 
     } 
    }; 

    $popup.toggle(); 
    if ($popup.is(':visible')) { 
    $(document).on('click', callback); 
    } 
    return false; 
} 

Answer 4

$("body").click(function(event){ 
      var $target = $(event.target); 
      if(!$target.parents().is(".popup") && !$target.is(".popup")){ 
       $("body").find(".popup").hide(); 
      } 
     }); 

questa è la soluzione per me

Answer 5

Come di jQuery 1.7 c'è il gestore on(), i seguenti lavori per me, assumendo un popup visibile contiene la classe '.activePopup':

$('body').on('click', ":not(.activePopup)", function(e){ 
    e.stopPropagation(); 
    //do your hiding stuff 
}); 

Answer 6

Ecco una soluzione potenziale per determinate situazioni. Il popup deve avere un tabindex impostato affinché funzioni e non possa avere alcun elemento "focalizzabile" all'interno.

$('a').click(function() { 
    $('.popup').show().focus(); 
}); 
$('.popup').blur(function() { 
    $(this).hide(); 
}); 

http://jsfiddle.net/d6zw3/

Answer 7

Sto usando un codice molto semplice per questo come: -

$(document).click(function(e){ 

    if($(e.target).closest('#popupdivID').length != 0) return false; 
    $('#popupdivID').hide(); 
}); 

questo è utile anche per il menu a discesa. se si fa clic sul menu a discesa e si visualizza l'elenco e quindi si fa clic su altrove nel documento, tale elenco dovrebbe essere chiuso. Ho usato lo stesso codice anche per quello.

Grazie !!

Answer 8

Ecco il frammento di codice che può aiutare per una struttura html

<script> 
jQuery(document).click(function() { 
     jQuery(".main-div-class .content").css("display","none"); 
    }); 

    jQuery(".main-div-class .content").click(function (e) { 
     e.stopPropagation(); 
     //do redirect or any other action on the content 
    });  
    jQuery(".main-div-class h4").click(function(e) { 
     e.stopPropagation(); 
     jQuery(this).parent().find(".content").show(); 
    }); 
</script> 
<div class="main-div-class"> 
<h4>click here</h4> 
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> 
</div> 

Answer 9

codice in modo aggiornato può essere come questo

<script type="text/javascript"> 
jQuery(document).ready(function(e) { 
jQuery(document).click(function() { 
     jQuery(".main-div-class .content").css("display","none"); 
    }); 

    jQuery(".main-div-class .content").click(function (e) { 
     e.stopPropagation(); 
     //do redirect or any other action on the content 
    });  
    jQuery(".main-div-class h4").click(function(e) { 
     e.stopPropagation(); 
     jQuery(this).parent().find(".content").show(); 
    }); 
}); 
</script> 
<div class="main-div-class"> 
<h4>click here</h4> 
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> 
</div> 

Answer 10

fare questo:

$(document).click(function (e) { 
    // show_alerts is the class of the link to display the popup 
    if (!$(e.target).parents().andSelf().is('.show_alerts')) { 
     // hide your popup 
    } 
}); 

esempio: http://jsfiddle.net/Acf3F/

Answer 11

Ho avuto problemi con tutte le soluzioni qui, quindi dopo un po 'di frustrazione; Mi sono avvicinato al problema da una direzione leggermente diversa.

In particolare non mi piaceva associare eventi di clic al corpo o al documento e event.target non era abbastanza affidabile. Inoltre non volevo usare stopPropagation() perché non volevo interferire con altri eventi.

Ecco come ho risolto, spero che aiuta:

Markup

<div id="ModalBG"></div> 
<div id="Modal">Content Here</div> 

JavaScript

function showModal(){ $("#Modal, #ModalBG").show(); } 

$("#ModalBG").click(function() { $("#Modal, #ModalBG").hide() }); 

CSS

#Modal{ 
    z-index: 99; 
} 


#ModalBG{ 
    opacity: 0; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 98; 
    display: none; 
}