如何让模态弹出窗口在点击时关闭

Question

这是我关于 Whosebug 的第一个问题，非常感谢您的帮助！我创建了一个单页网站，其中包含许多可点击的不同图像。单击后，将打开一个弹出模式，其中包含与每张图片相关的一些文本。

出于某种原因，"close" 模式的功能在单击时不起作用，我不确定我缺少什么。提前谢谢你，我真的很感激。

$(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 to this question: How do I detect a click outside an element?

的模态包装器点击的功能

如何让模态弹出窗口在点击时关闭

How to get modal popup to close on click

html

jquery

modalpopup