Fermez un div en cliquant sur l'extérieur

Je veux cacher un div en cliquant sur le lien étroit, ou en cliquant n'importe où à l'extérieur de ce div.

J'essaie de suivre le code, il ouvre et ferme le div en cliquant fermement sur le lien correctement, mais si j'ai un problème pour le fermer en cliquant n'importe où en dehors 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>

Demo: http://jsfiddle.net/LxauG/

Une autre manière qui rend alors votre jsfiddle moins buggy (il faut faire un double clic sur ouvert).

Cela n'utilise aucun événement délégué au niveau du corps

Définir tabindex="-1" vers 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); });

Vous avez besoin

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

Je suggérerais d'utiliser la méthode stopPropagation () comme indiqué dans le violon modifié:

Violon

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

De cette façon, vous pouvez cacher le popup lorsque vous cliquez sur le corps, sans avoir à ajouter un extra si, et lorsque vous cliquez sur la fenêtre contextuelle, l'événement ne bouge pas jusqu'au corps en parcourant le menu contextuel.

Il vaut mieux aller avec quelque chose comme ça. Il suffit de donner un identifiant au div que vous voulez cacher et de faire une fonction comme celle-ci. Appelez cette fonction en ajoutant l'événement onclic sur le corps.

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

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

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

Ensuite, sur son clic, ignore le popup.

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

Cette question pourrait avoir été répondu ici . Il peut y avoir des problèmes potentiels lorsque la propagation de l'événement est interrompue, comme expliqué par Philip Walton dans cette publication .

Une meilleure approche / solution serait de créer un événement jQuery personnalisé, par exemple, en sortie de sortie. Ben Alman a une excellente publication ( ici ) qui explique comment mettre en œuvre un (et explique également comment fonctionnent les événements spéciaux), et il a eu une belle implémentation ( ici ).

Plus de lectures sur jQuery events API et jQuery événements spéciaux:

Introduction à des événements personnalisés
Extension d'événement jQuery