CODEWITHSUNDEEP
javascriptjqueryhtml
user3848698
user3848698

Reputation: 322

Unable to close a popup

A popup with class=.team-popup opens up on click of class=".team-single" I am unable to close the pop up on click of class=.close-btn

Following 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 out

Upvotes: 3

Views: 451

Answers (2)

Antonio
Antonio

Reputation: 654

As you can see by the comment your html structure should be modified. Here is 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>

Upvotes: 0

user757095
user757095

Reputation:

in javascript all events (well, almost) "bubble" out to the parents elements.

in you sample code the "click" event reach the ".team-single" bounded function cause of this bubbling.

you should prevent the bubbling 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();
  });
});

Upvotes: 3

Related Questions