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

Question

我已经研究过这个问题并找到了提出的解决方案，但它们都没有对我有用。我找到的每个解决方案都会立即打开并关闭弹出窗口。

基本上，我只是希望能够关闭弹出窗口而无需点击＆＃34;关闭＆＃34;。如果用户点击#formWrap之外，那么我希望弹出窗口关闭。

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

$('#pdfPop').fadeOut(350); //This line here

有人看到我做错了吗？

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不使用stopPropagation：

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


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

    e.preventDefault();
});

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

Answer 2

我同意答案是stopPropagation()。我确实认为这是因为.pdfWrap是div而不是锚或按钮。

＆＃13;

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;