javascript - 通过单击外部关闭弹出窗口

Question

我研究了这个问题并找到了建议的解决方案，但没有一个对我有用。我找到的每个解决方案都会立即打开和关闭弹出窗口。

本质上，我只是希望能够在不需要单击“关闭”的情况下关闭弹出窗口。如果用户在 #formWrap 之外单击，那么我希望弹出窗口关闭。

要看到弹出窗口出现而不立即消失，请删除下面的代码行:

$('#pdfPop').fadeOut(350);//这里是这一行

有没有人看到我做错了什么？

$('.pdfWrap').on('click', function (event) {
	$('#pdfPop').fadeIn(350);
	$('body').css('overflow', 'hidden');
});

//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
	var targeted_popup_class = jQuery(this).attr('data-popup-close');
	$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
	$('body').css('overflow', 'auto');

	e.preventDefault();
});
/*$('body').click(function(e) {
    if (!$(e.target).closest('#pdfPop').length){
        $('#pdfPop').fadeOut(350);
    }
});*/
$(document).click(function(event) {
    if ( $(event.target).closest('#formWrap').get(0) == null ) {         
   // alert('clicked outside');   
	$('#pdfPop').fadeOut(350);	//This line here
    } else{
   // alert('clicked inside');
    }
});

#pdfPop {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	color: #FFF;
	position: fixed;
	z-index: 9999;
	margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}
#popInner {
	position: relative;
}
#xClose {
	position: absolute;
	right: 50px;
	top: 20px;
	width: 33px;
	height: auto;
}
#pdfBlock1 {
	background: linear-gradient(to right bottom, #000, #231F20);
	width: 65%;
	height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<div class="pdfWrap">Click Me</div>
<div id="pdfPop" data-popup="pop1">
	<div class="popInner">
		<a class="popup-close" data-popup-close="pop1" href="#">Close</a>
		<span id="testVal"></span>
		<div id="formWrap" class="total-center">
			<div id="pdfBlock1" class="iblock">
				<p class="blockTW" id="TW">Download your 3D PDF</p>
				<form id="pdfForm" method="POST">
			
					<input type="text" class="input block" id="company" maxlength="40" name="company" placeholder="Company Name">
			</div><div id="pdfBlock2" class="iblock">
				<input id="pdfButton" class="block" type="submit" value="Download File">
				</form>
			</div>
		</div>	
	</div>
</div>

Answer 1

我同意答案是 stopPropagation()。我相信这是因为 .pdfWrap 是一个 div 而不是 anchor 或按钮。

$('.pdfWrap').on('click', function(event) {
  event.stopPropagation();  //this is the only thing I changed.
  $('#pdfPop').fadeIn(350);
  $('body').css('overflow', 'hidden');
});

//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
  var targeted_popup_class = jQuery(this).attr('data-popup-close');
  $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
  $('body').css('overflow', 'auto');

  e.preventDefault();
});
/*$('body').click(function(e) {
    if (!$(e.target).closest('#pdfPop').length){
        $('#pdfPop').fadeOut(350);
    }
});*/
$(document).click(function(event) {
  if ($(event.target).closest('#formWrap').get(0) == null) {
    // alert('clicked outside');   
    $('#pdfPop').fadeOut(350); //This line here
  } else {
    // alert('clicked inside');
  }
});

#pdfPop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #FFF;
  position: fixed;
  z-index: 9999;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
}

#popInner {
  position: relative;
}

#xClose {
  position: absolute;
  right: 50px;
  top: 20px;
  width: 33px;
  height: auto;
}

#pdfBlock1 {
  background: linear-gradient(to right bottom, #000, #231F20);
  width: 65%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pdfWrap">Click Me</div>
<div id="pdfPop" data-popup="pop1">
  <div class="popInner">
    <a class="popup-close" data-popup-close="pop1" href="#">Close</a>
    <span id="testVal"></span>
    <div id="formWrap" class="total-center">
      <div id="pdfBlock1" class="iblock">
        <p class="blockTW" id="TW">Download your 3D PDF</p>
        <form id="pdfForm" method="POST">

          <input type="text" class="input block" id="company" maxlength="40" name="company" placeholder="Company Name">
      </div>
      <div id="pdfBlock2" class="iblock">
        <input id="pdfButton" class="block" type="submit" value="Download File">
        </form>
      </div>
    </div>
  </div>
</div>