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

Une autre façon de rendre votre jsfiddle moins bogué (double clic nécessaire à l'ouverture).

Cette méthode n'utilise pas d'événement délégué au niveau du corps.

Set (jeu de mots) tabindex="-1" pour DIV .popup ( et pour le style CSS outline:0 )

DEMO

$(".link").click(function(e){
    e.preventDefault();
    $(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
   $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
    $(this).fadeOut(300);
});

Answer 2

Vous avez besoin

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});

Answer 3

Je suggère d'utiliser la méthode stopPropagation() comme indiqué dans le fiddle modifié :

Violon

$('body').click(function() {
    $(".popup").hide();
});

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

De cette façon, vous pouvez cacher la fenêtre contextuelle lorsque vous cliquez sur le corps, sans avoir à ajouter un if supplémentaire, et lorsque vous cliquez sur la fenêtre contextuelle, l'événement ne remonte pas jusqu'au corps en passant par la fenêtre contextuelle.

Answer 4

Il est préférable d'opter pour quelque chose comme ceci. Il suffit de donner un identifiant à la div que vous voulez cacher et de créer une fonction comme celle-ci. appelez cette fonction en ajoutant l'événement onclick sur le corps.

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}

Answer 5

Ajoutez un arrière-plan transparent prenant toute la taille de la fenêtre, juste avant votre div popup

.transparent-back{
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

En cliquant sur le bouton, la fenêtre contextuelle disparaît.

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});