时间戳

首页 > 解决方案 > 用户在页面中超过 15 秒后显示弹出窗口

jquery - 用户在页面中超过 15 秒后显示弹出窗口

问题描述

根据需求做了一个小逻辑。尽力满足以下问题。但是，仍然受到以下逻辑的打击。

如果访客将鼠标移出窗口，则显示弹出窗口（这很好用）

但是，我们只需要显示弹出窗口，当用户在这个页面上超过 15 秒并且鼠标离开窗口时。

HTML

<div id="demo-fancybox-modal" data-delaytoshow="15">
  <div class="content">
    Demo Content
  </div>
  <button data-fancybox-close="" class="fancybox-close-small" title="Close"><svg class="icon-container"><use href="icons/symbols.svg#i-close" xlink:href="icons/symbols.svg#i-close"></use></svg></button>
</div>

JS：

var dataDelayToShow = component.attr('data-delaytoshow');
var cookieDelaySecond = dataDelayToShow * 1000;
setTimeout(function () {
  $.fancybox.open(component,{clickSlide: false});
}, cookieDelaySecond);


$(document).mouseleave(function () {
  $.fancybox.open($('#demo-fancybox-modal') ,{clickSlide: false});
});

标签： jquery

解决方案

您可以在页面加载中创建时间变量。每当用户执行鼠标离开事件时，检查时差并显示弹出窗口。

$(document).ready(function() {
  var loadTime = new Date();
  $(document).mouseleave(function () {
    var leaveTime = new Date();
    var diff = leaveTime - loadTime;
    var sec = diff/1000;
    if(sec > 5){
      alert('Leaving after 5 seconds')
    }
    loadTime = new Date();
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读