Question

单击按钮时，我会弹出一个简单的窗口。如果单击x（#close），它将关闭弹出窗口。目标是如果您在弹出窗口之外的任何位置单击，它也将关闭。我拥有它，因此，如果您单击没有类popup-content的任何内容，它将关闭弹出窗口。由于某种原因，这是行不通的。如果我更改了它，那么如果您单击具有popup-content类的任何内容，它将关闭，然后在弹出窗口中单击时，它将关闭。

我在这里做什么错了？

还有没有更好的方法可以做到这一点，而不必将类放在弹出窗口和按钮的每个可单击部分上？

https://codepen.io/sharpdesigner/pen/wRMeeW

html

$(document).ready(function() {
  $('#trigger').click(function() {
    $('#overlay').fadeIn(300);
  });
  $('#close').click(function() {
    $('#overlay').fadeOut(300);
  });
});

$(document).mouseup(function(e) {
  $("body").click(function(e) {
    if (e.target.className !== "popup-content") {
      $('#overlay').fadeOut(300);
    }
  });
});

.pop {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 3px;
  border: 1px solid #000;
  display: inline-block;
  cursor: pointer;
}

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}

#popup {
  max-width: 600px;
  width: 80%;
  max-height: 300px;
  height: 80%;
  padding: 20px;
  position: relative;
  background: #fff;
  margin: 20px auto;
}

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="trigger" class="pop popup-content">Click me</a>
<div id="overlay">
  <div id="popup" class="popup-content">
    <div id="close">X</div>
    <h2 class="popup-content">This is a popup</h2>
    <p class="popup-content">You just triggered a popup</p>
  </div>
</div>

Answer 1

如果将触发器放置在叠加层上。然后，在弹出窗口之外的任何单击都会将其关闭。

$(document).ready(function() {
    $('#trigger').click(function() {
        $('#overlay').fadeIn(300);  
    });
    $('#close, #overlay').click(function() {
        $('#overlay').fadeOut(300);
    });
});

Answer 2

检查此代码。

我在此处声明要为您的弹出窗口显示/隐藏事件。 我在动画中间添加了一个检查和一个animate-on类。这样，您仅在动画完成时显示/隐藏。

最后，身体不是您想要的。 overlay标签将使页面完全适合（根据css规则height/weight: 100% + position:fixed），并且其中包含您的弹出内容。因此，点击任何地方都会触发hide事件；并且只想在单击#close和#overlay（最后一个事件处理程序：e.eventTarget.id === 'overlay'）并且没有其他位置的情况下触发它。

Codepen： https://codepen.io/anon/pen/roGGaN?editors=1111 （如果可以看到，请注意我）谢谢@barmar

$(document).ready(function() {
  // Show event
 $('#overlay').on('show', function(e){
   // Check if we're in middle of an animation
   if($('#overlay').hasClass('animate-on')){
      return false;
   }
   // Show content
	 $('#overlay').addClass('animate-on').fadeIn(300,
      // + Callback function
      function(e){ $(this).removeClass('animate-on')});  
  });
  // Hide event
 $('#overlay').on('hide', function(e){
   // Check if we're in middle of an animation
   if($('#overlay').hasClass('animate-on')){
      return false;
   }
   // Hide content
	$('#overlay').addClass('animate-on').fadeOut(300,
      // + Callback function
      function(e){ $(this).removeClass('animate-on')});
 });
  // Open trigger
  $('#trigger').click(function() {
    $('#overlay').trigger('show');
  });
  // Close X
  $('#close').click(function() {
    $('#overlay').trigger('hide');
  });
  
  // Outside pop-up click (just #overlay)
  $("#overlay").click(function(e) {
    if ( "overlay" === e.target.id ) {
      $('#overlay').trigger('hide');
    }
	});
});

.pop {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 3px;	
  border: 1px solid #000;
  display: inline-block;
  cursor: pointer;
}

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  display: none;
}

#popup {
  max-width: 600px;
  width: 80%;
  max-height: 300px;
  height: 80%;
  padding: 20px;
  position: relative;
  background: #fff;
  margin: 20px auto;
}

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <a id="trigger" class="pop">Click me</a>
    <div id="overlay">
      <div id="popup" class="popup-content">
        <div id="close">X</div>
        <h2 class="popup-content">This is a popup</h2>
        <p class="popup-content">You just triggered a popup</p>
      </div>
    </div>

关闭简单的jQuery弹出窗口的问题

2 个答案: