web-dev-qa-db-fra.com

Fermez une div en cliquant à l'extérieur

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

J'essaie de suivre le code, il ouvre et ferme le div en cliquant sur le lien de fermeture correctement, mais si j'ai un problème pour le fermer en cliquant n'importe où en dehors du 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émo:http://jsfiddle.net/LxauG/

javascriptjqueryhtml
21
user1355300

Une autre façon de rendre votre jsfiddle moins bogué (double-clic nécessaire sur open).

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

Définissez tabindex="-1" sur 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);
});
32
A. Wolff

Vous avez besoin

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

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

Fiddle

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

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

De cette façon, vous pouvez masquer la fenêtre contextuelle lorsque vous cliquez sur le corps, sans avoir à en ajouter un supplémentaire, et lorsque vous cliquez sur la fenêtre contextuelle, l'événement ne s'affiche pas dans le corps en le parcourant.

6
Jonas Grumann

Tu ferais mieux d'aller avec quelque chose comme ça. Donnez juste un identifiant à la div que vous voulez cacher et créez une fonction comme celle-ci ... appelez cette fonction en ajoutant un événement onclick au corps.

function myFunction(event) { 

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

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

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

Puis sur son clic, fermez le popup.

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

On aurait pu répondre à cette question ici . Il peut y avoir des problèmes potentiels lorsque la propagation d’événement est interrompue, comme l’a expliqué Philip Walton dans this post .

Une meilleure approche/solution serait de créer un événement jQuery personnalisé, par ex. clickoutside. Ben Alman a un excellent article ( ici ) qui explique comment en implémenter un (et explique également le fonctionnement des événements spéciaux), et il en a une implémentation agréable ( ici ).

En savoir plus sur les événements spéciaux jQuery API et jQuery:

0
lookingaround