在下面的快速提示中,我将向您展示如何在短暂的延迟后打开网页上的模式窗口。 这对于突出特定的号召性用语可能很有用,例如注册时事通讯或在Facebook上获得喜欢。 一些站点也使用此技术来显示广告。
但是在继续之前,请花一秒钟时间问自己是否确实需要这样做。 每当我正在浏览的网站打开模式而无需点击任何东西时,我几乎总是立即关闭它,并感到烦恼的是我的注意力从我正在查看的内容中移开了。 我认为,此类技术可能会损害网站的整体体验,并且有更好的方法可以使访问者了解您的内容。
基本实现
还在读书吗? 好的,我想您已经准备好执行此操作,让我们开始吧。 对于不耐烦的人,本文结尾处有一个工作演示 。
对于此快速提示,我将使用Colorbox插件显示模态。 Colorbox依赖于jQuery,因此您也必须将其添加到页面中。 这是一个模板。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Delayed modal demo</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
<script>
<!-- Code here -->
</script>
</body>
</html>
请注意,我在这里使用各种CDN来包含脚本,但是您也可以使用软件包管理器(例如npm或bower)安装依赖项。
显示模态
通常,我们会将Colorbox分配给HTML元素,并将任何设置作为键/值对传递给对象内:
$(selector).colorbox({
key:value,
key:value
});
但是,我们要直接调用colorbox(不将其分配给任何对象),因此语法略有不同:
$.colorbox({
key:value,
key:value
});
Colorbox有很多选项(许多与显示图像有关),使您可以自定义模态。 在下面的示例中,我指定了它的尺寸,为它指定了一个类名(允许我使用CSS对其进行样式设置),并为其传递了要显示的HTML字符串。 您可以在上面链接到的页面上找到完整的选项列表。
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
然后,我们需要做的就是在所需的时间段过后,使用JavaScript的setTimeout
函数调用此代码。 setTimeout()
是一个本机JavaScript函数,它在指定的延迟(以毫秒为单位)后调用该函数或执行代码段。 如果您想了解setTimeout()
来龙去脉,则可以阅读此SitePoint教程 。
setTimeout(function(){
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
}, 10000);
现在,访问者浏览网站十秒钟后,弹出窗口将打开。
可达性问题
模态窗口周围存在许多可访问性问题,例如:键盘用户可以与之交互吗? 标记是语义的吗? 他们容易解雇吗? 您可以在这里找到关于该主题的更详尽的讨论: 使Modal Windows更适合所有人 。
尽管Colorbox具备许多现成的功能,但仍有一些需要改进的地方。
转移焦点
当模式打开时,Colorbox会将焦点移到窗口本身。 这很好,但是如果模态中有任何交互元素(例如<input>
元素),我们可以考虑将焦点设置为此。 对于鼠标用户来说,这将意味着鼠标点击次数减少,而对于使用键盘的用户来说,这将减少按钮按下次数。 我们可以使用JavaScript的focus方法来做到这一点。
我们还需要利用Colorbox触发的onComplete
事件,以确保我们的内容已加载。
$.colorbox({
...
onComplete: function(){ $("#myInput").focus(); }
});
记住用户以前的位置
用户取消弹出窗口后,只有礼貌地将其返回到页面上的先前位置。 为此,我们需要跟踪用户与之交互的最新元素,并在模式关闭后将焦点重置为该元素。
var lastFocus;
setTimeout(function(){
lastFocus = document.activeElement;
$.colorbox({
...
onClosed: function(){ lastFocus.focus(); }
});
}, 2000);
每X小时显示一次弹出窗口
出于可用性考虑,用户每次访问您的网站时都必须打开模式,这不是一个好主意。 而是考虑每X个小时或每X天显示一次。
一种方法是在显示了模态后设置cookie,该cookie在指定时间后过期。 然后,您可以在页面加载时检查Cookie的存在并采取相应的措施。
为此,我们将需要一组用于处理Cookie的函数。 我推荐此任务使用js-cookie 。
将其包含在Colobox库之后的页面中:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
至此,将各种功能迁移到自己的功能中也很有意义。
var lastFocus;
function onPopupOpen(){
$("#myInput").focus();
}
function onPopupClose(){
Cookies.set('colorboxShown', 'yes', { expires: 1 });
lastFocus.focus();
}
function displayPopup(){
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 250,
onComplete: onPopupOpen,
onClosed: onPopupClose
});
}
setTimeout(function(){
var popupShown = Cookies.get('colorboxShown');
if(popupShown){
console.log("Cookie found. No action necessary");
} else {
lastFocus = document.activeElement;
displayPopup();
}
}, 2000);
演示版
这就是在CodePen上工作的全部内容。 运行嵌入,弹出窗口将在三秒钟后打开。 如上所示,它会每24小时显示一次,因为它会设置Cookie。 话虽如此,我添加了“ 清除Cookies”按钮,以便您可以多次运行演示。 您可以通过单击右下角的“ 重新运行”按钮来重新运行嵌入。
请参阅CodePen上的SitePoint( @SitePoint )的Pen gwWpQX 。
结论
在这个快速提示中,我演示了用户在指定时间浏览您的网站后如何打开弹出窗口。 我还强调了围绕此方法的可用性和可访问性问题。
如果您有任何意见或疑问,欢迎在下面的评论中听到。 如果您对代码有任何疑问,或者在自己的站点上无法实现此代码,建议您在SitePoint论坛的JavaScript类别中发布问题。
From: https://www.sitepoint.com/show-modal-popup-after-time-delay/