由底层div触发的jquery点击

Question

我正在制作自己的灯箱。

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

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

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

这是我目前得到的： （灯箱居中，如https://stackoverflow.com/a/8620628/891052）

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

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

Answer 2

在示例灯箱上为您快速标记！基本上，正如诺亚所说，您只需在透明 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 3

要阻止点击传播：

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

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

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