jquery 底层触发的点击 div

Question

我正在制作自己的灯箱。

我有一个固定在整个屏幕上的半透明 div，在它里面我有一个以我的内容为中心的灯箱。 div 中的 div。

我对 jQ 不是很好，所以我不知道如何确保单击事件（关闭带有变暗 div 和灯箱的容器）仅在单击变暗区域时触发，并且如果我单击灯箱中的某些内容，则不会。

本质上：如果单击半透明区域，则关闭弹出窗口和半透明区域，但如果我单击中间的灯箱则不会。

这是我目前得到的：（灯箱像一样居中）

$(document).ready( function() {
  $("#openpopup").click(function() {
 $('#closepopup').toggle();
  });
  $("#closepopup").click(function() {
 $('#closepopup').toggle();
  });
});

html, body {height:100%;}
#closepopup {
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 
 THIS_CENTERS_CONTENT:;
 width:100%;
 height:100%;
 vertical-align: middle;
 text-align:center;
}
.fullheight { 
 THIS_CENTERS_CONTENT:;
 height:100%;
 vertical-align: middle;
 display: inline-block;
}

#popupbox {
 background:#ebebeb;
 border-radius:15px;
 text-align:left;
 height:auto;
 
 THIS_CENTERS_CONTENT:;
 max-width:90%;
 vertical-align: middle;
 display: inline-block;
}
#popupboxinner {
 THIS_KEEPS_CONTENT_PLACED:;
 max-width:800px; SAME_AS_MAX_IMG_WIDTH:;
 padding:20px 30px;
 min-width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="closepopup">
 <span class="fullheight"></span>
 <div id="popupbox">
  <div id="popupboxinner">
   LIGHTBOX CONTENT - SHOULD NOT CLOSE IF CLICKED
  </div>
 </div>
</div>
<span id="openpopup">OPEN CLICKABLE SEMI TRANSPARENT WRAPPER WITH LIGHTBOX INSIDE</span>

Answer 1

在示例灯箱上为您做了一个快速标记！基本上，正如 Noah 所说，您只需在透明 div 上放置一个点击事件。

如果您在执行代码时遇到问题，请告诉我！

$('#lightbox-wrapper').click(function() {
  $('#lightbox-wrapper, #lightbox').toggleClass('open');
});


function openLightBox() {
  $('#lightbox-wrapper, #lightbox').toggleClass('open');
}

/* DEFAULT STATE */

#lightbox-wrapper {
  display: none;
}
#lightbox {
  display: none;
}
#lightbox-wrapper.open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
#lightbox.open {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  margin-top: 40vh;
}
#lightbox-content {
  display: block;
  width: 250px;
  margin: 0 auto;
  background: #f1f1f1;
  padding: 5px;
  text-align: center;
  box-shadow: 0px 0px 5px #f5f5f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="lightbox-wrapper"></div>
<div id="lightbox">
  <div id="lightbox-content">
    <h1>I'm a lightbox</h1>
  </div>
</div>


<button onclick="javascript:openLightBox()">Open Lightbox</button>

Answer 2

要阻止点击传播：

$('#lightbox').click(function(e){
  e.stopPropagation();
});

只需将 #lightbox 替换为内部 div（透明 div 内的灯箱）的 ID，并将其添加到现有代码中。

// 已编辑 - 在末尾添加了大括号。 - 保罗

Answer 3

$(document).ready( function() {
  $("#openpopup").click(function() {
 $('#closepopup').toggle();
  });
  $("#closepopup").click(function() {
 $('#closepopup').toggle();
  });
  $('#popupbox').click(function(e){
     e.stopPropagation();
  });
});

html, body {height:100%;}
#closepopup {
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 
 THIS_CENTERS_CONTENT:;
 width:100%;
 height:100%;
 vertical-align: middle;
 text-align:center;
}
.fullheight { 
 THIS_CENTERS_CONTENT:;
 height:100%;
 vertical-align: middle;
 display: inline-block;
}

#popupbox {
 background:#ebebeb;
 border-radius:15px;
 text-align:left;
 height:auto;
 
 THIS_CENTERS_CONTENT:;
 max-width:90%;
 vertical-align: middle;
 display: inline-block;
}
#popupboxinner {
 THIS_KEEPS_CONTENT_PLACED:;
 max-width:800px; SAME_AS_MAX_IMG_WIDTH:;
 padding:20px 30px;
 min-width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="closepopup">
 <span class="fullheight"></span>
 <div id="popupbox">
  <div id="popupboxinner">
   LIGHTBOX CONTENT
  </div>
 </div>
</div>
<span id="openpopup">OPEN</span>

jquery 底层触发的点击 div

jquery click triggered by underlaying div

jquery

click