Failed to close popup
Popup with class=.team-popup
opens on click class=".team-single"
I can't close the popup on clickclass=.close-btn
Below is the JS and html code
jQuery(document).ready(function() {
jQuery(".team-single").click(function() {
jQuery(".team-popup").show();
});
jQuery(".close-btn").click(function() {
jQuery(".team-popup").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-single">
<div class="team-popup">
<div class="popup-box">
<div class="col-sm-8 col-xs-7 right-side">
</div>
<span class="close-btn">x close</span>
</div>
</div>
</div>
<!-- single team ends-->
Please help me
+3
source to share
2 answers
in javascript all events are (well, almost) "bubble" for parent elements.
in your code example, the "click" event will reach the restricted function of the ".team-single" limited function of this bubbling.
you should prevent bubbles by using the stopPropagation function of the event object.
jQuery(document).ready(function() {
jQuery(".team-single").click(function(e) {
jQuery(".team-popup").show();
});
jQuery(".close-btn").click(function(e) {
jQuery(".team-popup").hide();
e.stopPropagation();
});
});
+3
source to share
As you can see from the comment, your html structure needs to be changed. Here's an example
<html>
<body>
<div class="team-single">
<div class="open-popup">open</div>
<div class="team-popup" style="display:none">
<div class="popup-box">
<div class="col-sm-8 col-xs-7 right-side">
text inside your popup
</div>
<span class="close-btn">x close</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery(".open-popup").click(function(){
jQuery(".team-popup").show();
});
jQuery(".close-btn").click(function(){
jQuery(".team-popup").hide();
});
});
</script>
</body>
</html>
0
source to share