Question

我有一个叠加DIV，一旦用户点击链接就会出现。用户可以通过单击＆＃34; X＆＃34;来关闭叠加层。 DIV中的链接。我希望用户能够通过单击页面上的任意位置来关闭叠加DIV。请帮我实现这个功能。以下是我的代码......

＆＃13;

$(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
  
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

$(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
  
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

由于您没有提供有关HTML结构的大量信息，我必须想象它的外观。

您可以做的是点击叠加层本身来关闭叠加层。

jQuery( ".tc_bg" ).click(function() {
    var popHeight2 = popHeight + 500;

    jQuery( ".menu_pop" ).animate({
        top: "-" + popHeight2
    }, "100", function() {
        jQuery( ".tc_bg" ).remove();
    });
});

如何通过单击身体上的任何位置来关闭弹出式DIV

2 个答案: