Как заставить модальное всплывающее окно закрываться при клике

Question

Это мой первый вопрос по stackoverflow, и я был бы признателен за любую помощь! Я создал одностраничный веб-сайт с несколькими изображениями, которые я сделал кликабельными. При нажатии открывается модальное всплывающее окно, включающее текст, относящийся к каждому изображению.

По какой-то причине, функция "закрыть" модал не работает при нажатии, и я не уверен, что мне не хватает. Заранее спасибо, я очень ценю это.

$(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>

Модал открывается, когда я нажимаю на изображение, стиль CSS выглядит хорошо, я просто не могу закрыть модал. Еще раз спасибо!

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>

Вы можете привести в порядок свой сценарий еще больше, просто используя прямые селекторы jQuery вместо переменных, но я предполагаю, что есть и другая причина, по которой вы это сделали.

У меня есть функция, позволяющая определять только щелчок по модальной оболочке из этого ответа на этот вопрос: Как обнаружить щелчок вне элемента?