如何获得模式弹出窗口以在单击时关闭

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选择器而不是变量来整理脚本，但是我认为还有其他原因可以做到。

我得到的功能是仅检测从this answer到以下问题的模式包装上的点击：How do I detect a click outside an element?