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

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

如果您在代码后面有问题，请告诉我们！

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 3

停止点击传播：

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

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

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

由底层div触发的jquery点击

3 个答案: