How to get modal popup to close on click

Question

This is my first question on stackoverflow and I would appreciate any help! I created a single-page website that has a number of different images that I made clickable. When clicked, a pop-up modal opens that includes some text relevant to each image.

For some reason, the function to "close" the modal does not work when clicked and I am not sure what I am missing. Thank you, in advance, I really appreciate it.

$(document).ready(function() {

  // Vars

    var   modBtn2  = $('#modBtn2'),
          modal2   = $('#modal2'),
          close2   = modal2.find('.close2'),
          modContent2 = modal2.find('.modal-content2');

  // open modal when click on open modal button

    modBtn2.on('click', function() {
    modal2.css('display', 'block');
    modContent2.removeClass('modal-animated-out').addClass('modal-animated-in');
      });

  // close modal when click on close button or somewhere out the modal content

      $(document).on('click', function(e) {
        var target2 = $(e.target2);
        if(target2.is(modal2) || target2.is(close2)) {
          modContent2.removeClass('modal-animated-in').addClass('modal-animated-out').delay(300).queue(function(next) {
        modal2.css('display', 'none');
        next();
          });
        }
      });
    });

.modal {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <div class="client item-3 c-suite">
              <img src="images/image_transparent.png" alt="company logo" 
          class="modal-btn" id="modBtn2">
    </div>

    <div id="modal2" class="modal">

        <div class="modal-content" id="modal-content2">

          <div class="modal-header modal-header-3">
            <h3 class="header-title">name</h3>
            <div class="close close2 fa fa-close"></div>
          </div>

          <div class="modal-body">
            <p>Text.</p>
            <p>Tags:</p>
            <ul>
              <li>Text</li>
              <li>Text</li>
              <li>Text</li>
              <li>Text</li>
            </ul>
          </div>

          <div class="modal-footer modal-footer-2">
            <h3></h3>
          </div>

        </div>

       </div>

The modal opens when I click the image, the css styling looks good, I just cannot close the modal. Thank you, again!

Answer 1

$(document).ready(function() {

  // Vars

    var   modBtn2  = $('#modBtn2'),
          modal2   = $('#modal2');

  // open modal when click on open modal button

    modBtn2.on('click', function() {
    modal2.css('display', 'block');
    $('.modal-content2').removeClass('modal-animated-out').addClass('modal-animated-in');
      });

  // close modal when click on close button 

      $('.close2').on('click', function() {
          
    $('.modal-content2').removeClass('modal-animated-in').addClass('modal-animated-out');
     modal2.css('display', 'none');
      });

$('.modal-wrapper').click(function(event) { 
    if(!$(event.target).closest('#modal-content2').length) {
        if($('.modal-wrapper').is(":visible")) {
            $('.modal-wrapper').hide();
        }
    }        
});

    });

.modal-wrapper {
display: none;
background: #333;
opacity: 0.7;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 100;
}

.modal-content {
width: 50%;
margin: 0 auto;
background: #fff;
position: relative;
z-index: 101;
top: 3rem;
padding: 0.5rem;
}

.close {
  cursor: pointer;
  padding: 3px;
  border-radius: 3px;
  color: #fff;
  background-color: #333;
  width: 1rem;
  height: 1rem;
  float: right;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <div class="client item-3 c-suite">
              <img src="images/image_transparent.png" alt="company logo" 
          class="modal-btn" id="modBtn2">
    </div>

    <div id="modal2" class="modal-wrapper">

        <div class="modal-content" id="modal-content2">
            <div class="close close2 fa fa-close">x</div>

          <div class="modal-header modal-header-3">
            <h3 class="header-title">name</h3>
          </div>

          <div class="modal-body">
            <p>Text.</p>
            <p>Tags:</p>
            <ul>
              <li>Text</li>
              <li>Text</li>
              <li>Text</li>
              <li>Text</li>
            </ul>
          </div>

          <div class="modal-footer modal-footer-2">
            <h3></h3>
          </div>

        </div>

       </div>

You could tidy up your script even more by just using direct jQuery selectors instead of variables, but I assume there's some other reason you have done that.

I got the function to only detect the click on the modal wrapper from this answer to this question: How do I detect a click outside an element?