Fermer une division en cliquant à l'extérieur

Question

Je veux cacher une div en cliquant sur le lien de fermeture qu'elle contient, o en cliquant n'importe où en dehors de cette div.

J'essaie le code suivant, il ouvre et ferme la div en cliquant sur le lien de fermeture correctement, mais j'ai un problème pour la fermer en cliquant n'importe où à l'extérieur de la div.

$(".link").click(function() {
  $(".popup").fadeIn(300);
}

);
$('.close').click(function() {
  $(".popup").fadeOut(300);
}

);
$('body').click(function() {
  if (!$(this.target).is('.popup')) {
    $(".popup").hide();
  }
}

);

<div class="box">
  <a href="#" class="link">Open</a>
  <div class="popup">
    Hello world
    <a class="close" href="#">Close</a>
  </div>
</div>

Démonstration : http://jsfiddle.net/LxauG/

Answer 1

La réponse à cette question aurait pu être la suivante aquí . Il peut y avoir des problèmes potentiels lorsque la propagation des événements est interrompue, comme l'explique Philip Walton dans ce poste .

Une meilleure approche/solution serait de créer un événement jQuery personnalisé, par exemple clickoutside. Ben Alman a publié un excellent article ( aquí ) qui explique comment en mettre un en œuvre (et explique également comment fonctionnent les événements spéciaux), et il en a fait une belle mise en œuvre ( aquí ).

Pour en savoir plus sur l'API d'événements jQuery et les événements spéciaux jQuery :

• Introduction aux événements personnalisés
• Extensions d'événements jQuery

Answer 2

var modal = document.getElementById("reject-popup");    
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }

}

Answer 3

 //for closeing the popover when user click outside it will close all popover 
 var hidePopover = function(element) {
        var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
        elementScope.isOpen = false;
        elementScope.$apply();
        //Remove the popover element from the DOM
        $(element).siblings('.popover').remove();
    };
 $(document).ready(function(){
 $('body').on('click', function (e) {
       $("a").each(function () {
                    //Only do this for all popovers other than the current one that cause this event
           if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
                && $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)                  
                    {
                         hidePopover(this);
                    }
        });
    });
 });