时间戳

首页 > 解决方案 > 单击外部时隐藏弹出窗口

javascript - 单击外部时隐藏弹出窗口

问题描述

这段代码显示了一个弹出窗口。我希望当我们单击屏幕中除弹出区域之外的任何位置时，此弹出窗口消失。我尝试了很多东西，但结果并不像预期的那样。有人可以帮我解决这个问题吗？我可以通过jQuery使用功能吗？我可以调用主页，即“a href =“#”？

#container2 {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  visibility: hidden;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  /* complimenting your modal colors */
}

#container2:target {
  visibility: visible;
  display: block;
}

.reveal-modal {
  position: absolute;
  height: 350px;
  background: #0baa16;
  width: 450px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div id="container">
  <div id="exampleModal" class="reveal-modal">
    ........
    <a href="#">Close Modal</a>
  </div>
</div>

标签： javascripthtmljquerycss

解决方案

您可以在隐藏容器的整个文档上添加事件侦听器。由于容器是文档的一部分，因此您需要停止单击该容器以冒泡并触发文档上的事件。

$(document).on('click', function(){
	$('#exampleModal').hide();
});

$('#exampleModal').on('click', function(e){
	e.stopPropagation();
});
.reveal-modal {
    position: absolute;
    height:350px;
background:#0baa16;
    width:450px;
    left:50%;
    top: 50%;
    transform:translate(-50%,-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="exampleModal" class="reveal-modal">
    
</div>

推荐阅读