用户离开网站时生成弹出窗口的最佳方法是什么

Question

我创建了一个仅当用户离开网站时才显示的表单。我搜索找到了一个与此相关的函数，而我能找到的最接近的函数是mouseleave。

它运行良好-至少在台式机（尚未检查手机）上，除非存在一个问题。我希望弹出窗口仅出现一次。现在，每次鼠标移到体外时都会出现。

因此，考虑到这一点，我试图找出是否有更好的方法。

完美的解决方案不会使用主体，而是会检测到用户何时进入浏览器的浏览器标签/搜索栏。我不确定该放什么，所以身体似乎是一个不错的起点。

还有没有一种方法可以限制一次工作？

我无法使代码段正常运行，因此请随时在测试站点上查看它。

$('body').mouseleave(function() {
  $('#specialPop').fadeIn(350);
  $('body').css('overflow', 'hidden');
});
$('[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();
});

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

.popSpecialClose {
  position: absolute;
  right: 40px;
  top: 20px;
  width: 33px;
  height: auto;
  z-index: 99999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="specialPop" data-popup="popSpecial">
  <a class="popSpecialClose" data-popup-close="popSpecial" href="#">
		Close
	</a>
</div>

Answer 1

使用window.beforeunload，而不是mouseleave。

$('window').on("beforeunload",function() {
		$('#specialPop').fadeIn(350);
		$('body').css('overflow', 'hidden');
});
$('[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();
});

#specialPop {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	color: #FFF;
	position: fixed;
	z-index: 999999;
	margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}
.popSpecialClose {
	position: absolute;
	right: 40px;
	top: 20px;
	width: 33px;
	height: auto;
	z-index: 99999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="specialPop" data-popup="popSpecial">
	<a class="popSpecialClose" data-popup-close="popSpecial" href="#">
		Close
	</a>
</div>