Каков наилучший способ создания всплывающего окна, когда пользователь уходит с сайта

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>