Jquery Popup schließen

Question

Ich versuche, jquery Code zu schreiben, der einfaches Popup schließt. Hier ist ein Beispiel.

Wenn ich auf ein Bild klicke, wird ein Popup angezeigt, aber wenn ich versuche, es zu schließen, funktioniert es nicht. Ich denke, es ist, weil es schließt und wieder zeigt.

$(".li").click(function() { 
 
    $(".popup", this).show(); 
 
}); 
 

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

.popup { 
 
    background-color: black; 
 
    opacity: 0.8; 
 
    height: 60%; 
 
    width: 60%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div>

Answer 1

Ihr Problem ist, dass die .popup im li Element ist, so, wenn Sie die .popup klicken wird es versteckt, aber die Click-Handler läuft auch sofort auf dem li es wieder zu zeigen.

Um dies zu beheben, rufen Sie stopPropagation() auf das Ereignis an den .popup Click-Handler übergeben, wie folgt aus:

$(".li").click(function() { 
 
    $(".popup", this).show(); 
 
}); 
 

 
$(".popup").click(function(e) { // receive the event parameter here 
 
    e.stopPropagation(); // and stop the event bubbling up the DOM here 
 
    $(".popup").hide(); 
 
});

.popup { 
 
    background-color: black; 
 
    opacity: 0.8; 
 
    height: 60%; 
 
    width: 60%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div> 
 

 
<div class="li"> 
 
    <img src="foo.jpg"> 
 
    <div class="popup" style="display: none;">POPUP</div> 
 
</div>

Beachten Sie auch, dass Ihre aktuelle Code wird alle offenen .popup Elemente schließen. Möglicherweise möchten Sie $('.popup').hide() zu $(this).hide() ändern, wenn Sie nur das angeklickte Popup schließen möchten.