JQuery annuler le clic sur un enfant d'un div

Mousse
Javascript

Bonjour à tous, c'est encore moi, cette fois-ci pour du JQuery pur et dur...

Voilà mon problème, au clic sur un lien, une pop-in s'affiche (un peu comme sur facebook quand on clique sur une photo, un cadre noir apparaît avec la photo au centre). Et pour ne plus afficher cette popin, il suffit de cliquer sur le fond noir.

Mon soucis est que tous les éléments de cette pop-in sont enfants de ce div à fond noir. Du coup, au clic sur ses enfants, la pop-in se supprime alors qu'elle ne devrait pas.

Quelqu'un saurait comment "annuler" le clic sur les enfants d'un div ? J'ai fait pas mal de recherche, j'ai trouvé .not, :not, .stopPropagation mais rien n'y fait...

Voilà mon code :

HTML

<div class='back_fader'> <!-- Le div parent au fond noir -->
    <div class='popup_content'> <!-- Le div enfant avec du contenu -->
        <div id='comments'>Mon contenu</div>
    </div>
</div>

JQuery 

$('.back_fader').click(function(e) {
    $('.back_fader').css({'display':'none'});
    $('.popup_content').css({'display':'none'});
    $('#comments').css({'display':'none'});
    $('.back_fader').hide();
    $('.popup_content').hide();
    $("#comments").empty(); 
});

Aperçut : Screenshot

Merci à vous !

3 réponses

Shadow
Réponse acceptée

jQuery y a pensé : event.stopPropagation(); :)

Sinon tu peux le faire comme cela :

HTML:

<!-- back_fader et popup_content sont placés juste après body mais avant le reste du code -->
...]
<body>
    <div id="back_fader"></div>
    <div id="popup_content">
        <div id="comments">Mon contenu</div>
    </div>
    ...]
</body>
...]

CSS :
(demandera peut-être quelques ajustements ;) surtout pour #popup_content que j'ai centré de la pire des façons :P) 

#back_fader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .8; z-index: 1000; display: none;
}
#popup_content {
    position: fixed; width: 500px; background: #fff; left: 50%; margin-left: -250px; top: 120px; z-index: 1100; display: none;
}

JS: 

// Ouverture
$(".open-btn").bind('click', function() {
    $("#back_fader, #popup_content").show();
    // Autres actions
});
// Fermeture
$("#back_fader").bind('click', function() {
    $("#back_fader, #popup_content").hide();
    // Autres actions
});
deadC3LL

Bonjour,
en général lorsque l'on veut coder ce genre de système on utilise une div overlay (ta div back_fader) vide :

<div class="back_fader"></div>

que tu gère en css / jquery par la suite pour lui donner la taille souhaitée, ça évite ce genre de problème.

Si tu tiens à coder ce système toi même et à garder ton agencement tel qu'il est, une solution serait de définir un booléen qui changerait de valeur lors du hover de ta div popup_content et qui servirait de condition lors du click, mais c'est pas très propre...

Mousse
Auteur

D'accord, je vais essayer ce système alors !