如何通过点击机身上的任何位置来关闭弹出的DIV

how to close popup DIV by clicking anywhere on the body

本文关键字：DIV 位置 任何 何通过 击机      更新时间：2023-09-26

我有一个覆盖div，一旦用户点击链接就会出现。用户可以通过点击DIV中的"X"链接来关闭覆盖。我希望用户能够通过点击页面上的任何位置来关闭覆盖DIV。请帮助我实现此功能。以下是我的代码。。。

$(function(){
  var mHeight = $(window).height();
  var popHeight = $(window).height();
  var mWidth = $(window).width();
  var popWidth = $(window).width();
  
  $(".pop_Show").click(function(){
    if(mHeight < popHeight){
      $(".pop_Content").css({position: "absolute", "margin-top": "0"});
      $(".pop_Content").animate({top: '0'}, "slow");
    }else{
      $(".pop_Content").animate({top: '50px'}, "slow");
    }
    if(mWidth < popWidth){
      $(".pop_Content").css({left: "0", "margin-left": "0"});
    }
    $("body").append("<div class='disable_bg'></div>");
  });
  
//Script for hiding the overlay div by clicking on X
  
  $(".pop_Close").click(function(){
    var popHeight2 = popHeight+500;
    $(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){$(".disable_bg").remove();});
  });
  
  
// I want the script for hiding the overlay by clicking anywhere in the page
  
});
.pop_Content {
  overflow: hidden; 
  z-index:2500; 
  position:fixed; 
  top:-2000px; 
  left: 50%;
  margin-left:-150px;
  width:300px;
  height:100px;
  background:#ccc;
  padding:15px;
}
.pop_Close{
  position:absolute;
  z-index:1000;
  top:0;
  right:0;
  float:right; 
  cursor:pointer;
  margin:0px 10px;
  color:#595959;
  font:1.5em verdana;
  text-align:center;
}
.pop_Close:before {
  content: "x";
}
.disable_bg {
  background: black;
  opacity: .5;
  left: 0px;
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: fixed; 
  z-index: 2450;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
  <a href="#" class="pop_Show">Click Me</a>
  <!--Overlay Div-->
  <div class="pop_Content"><a class="pop_Close"></a>
  I am the Overlay Div
  </div>
  
</body>
</html>

您需要添加一个事件侦听器，该侦听器可以检查您是否单击了覆盖背景。我修改了代码，使其重新使用相同的元素，而不是每次都创建一个新的元素。这会在每次附加覆盖的背景时添加事件侦听器（jQuery会在删除时删除事件侦听器）。我还修改了点击事件监听器的逻辑，使其只针对与监听器应用到的元素直接匹配的点击事件。这可以防止通过点击其中的内容来关闭覆盖。

$(function(){
  var mHeight = $(window).height();
  var popHeight = $(window).height();
  var mWidth = $(window).width();
  var popWidth = $(window).width();
  var disable_bg =  $(document.createElement('div')).addClass('disable_bg'), closeFn;
  
  $(".pop_Show").click(function(){
    if(mHeight < popHeight){
      $(".pop_Content").css({position: "absolute", "margin-top": "0"});
      $(".pop_Content").animate({top: '0'}, "slow");
    }else{
      $(".pop_Content").animate({top: '50px'}, "slow");
    }
    if(mWidth < popWidth){
      $(".pop_Content").css({left: "0", "margin-left": "0"});
    }
   $('body').append(disable_bg);
   disable_bg.click(closeFn);
  });
  
//Script for hiding the overlay div by clicking on X
  
  $(".pop_Close").click(closeFn = function(e){
    if(e.target !== this) return;
    var popHeight2 = popHeight+500;
    $(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){disable_bg.remove()});
  });
  
// I want the script for hiding the overlay by clicking anywhere in the page
  
});
.pop_Content {
  overflow: hidden; 
  z-index:2500; 
  position:fixed; 
  top:-2000px; 
  left: 50%;
  margin-left:-150px;
  width:300px;
  height:100px;
  background:#ccc;
  padding:15px;
}
.pop_Close{
  position:absolute;
  z-index:1000;
  top:0;
  right:0;
  float:right; 
  cursor:pointer;
  margin:0px 10px;
  color:#595959;
  font:1.5em verdana;
  text-align:center;
}
.pop_Close:before {
  content: "x";
}
.disable_bg {
  background: black;
  opacity: .5;
  left: 0px;
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: fixed; 
  z-index: 2450;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
  <a href="#" class="pop_Show">Click Me</a>
  <!--Overlay Div-->
  <div class="pop_Content"><a class="pop_Close"></a>
  I am the Overlay Div
  </div>
  
</body>
</html>

由于您没有提供太多关于HTML结构的信息，我不得不想象它可能是什么样子。

您可以通过单击覆盖本身来关闭覆盖。

jQuery( ".tc_bg" ).click(function() {
    var popHeight2 = popHeight + 500;
    jQuery( ".menu_pop" ).animate({
        top: "-" + popHeight2
    }, "100", function() {
        jQuery( ".tc_bg" ).remove();
    });
});
相关文章：