jQuery: ocultar ventana emergente si se detectó clic en otra parte

Question

Estoy tratando de ocultar un div si el usuario hace clic en cualquier lugar PERO en la ventana emergente O en los elementos secundarios. Este es el código que tengo hasta ahora:

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

Funciona para el div .popup, pero si cualquiera de sus hijos se hace clic, se esconde de todos modos.

Answer 1

Realmente podría simplificar esto un poco creo:

// 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(); 
}); 

Al hacer clic en la ventana emergente, o cualquiera de sus hijos va a causar la propagación se detenga antes de que llegue al cuerpo.

demostración de detener la propagación de eventos: http://jsbin.com/ofeso3/edit

Answer 2

¡Arregle su lógica booleana! :)

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

Answer 3

Estamos utilizando esto para mostrar una ventana emergente en clic y ocultarlo a continuación, una vez que se hace clic en el mismo botón o haga clic fuera.

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(); 
      } 
     }); 

Ésta es la solución para mí

Answer 5

A partir de jQuery 1.7 se encuentra el controlador on(), las siguientes obras para mí, asumiendo una ventana emergente visible contiene la clase '.activePopup':

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

Answer 6

Aquí hay una posible solución para ciertas situaciones. La ventana emergente debe tener tabindex configurado para que funcione y no puede tener ningún elemento "enfocable" dentro.

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

http://jsfiddle.net/d6zw3/

Answer 7

Estoy utilizando un código muy simple para esto: -

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

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

esto también es útil el menú desplegable. si hace clic en el menú desplegable y visualiza la lista y luego hace clic en cualquier otro lugar del documento, entonces ese menú desplegable debe cerrarse. He usado el mismo código para eso también.

Gracias!

Answer 8

Aquí es el fragmento de código que pueden ayudar para una estructura 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

código de manera actualizada puede ser así

<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

hacer esto:

$(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 
    } 
}); 

ejemplo: http://jsfiddle.net/Acf3F/

Answer 11

Tuve problemas con todas las soluciones aquí, así que después de un poco de frustración; Abordé el problema desde una dirección ligeramente diferente.

Específicamente no me gustó adjuntar eventos de clics al cuerpo o documento y event.target no era lo suficientemente confiable. Tampoco quería usar stopPropagation() ya que no quería interferir con otros eventos.

Así es como lo resolví, creo que sirve:

marcado

<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; 
}