hui模态框延时关闭弹出框_快速提示：延时后显示模态弹出窗口

最新推荐文章于 2021-06-10 16:31:12 发布

dingshi7798

最新推荐文章于 2021-06-10 16:31:12 发布

阅读量304

点赞数

文章标签： java python javascript js jquery ViewUI

原文链接：https://www.sitepoint.com/show-modal-popup-after-time-delay/

版权

hui模态框延时关闭弹出框

在下面的快速提示中，我将向您展示在短暂的延迟后如何在网页上打开模式窗口。这对于突出特定的号召性用语可能很有用，例如注册新闻通讯或在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 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

将其包含在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”按钮，以便您可以多次运行演示。您可以通过单击右下角的“ 重新运行”按钮来重新运行嵌入。

见笔gwWpQX由SitePoint（ @SitePoint上） CodePen 。

结论

在这个快速提示中，我演示了用户在指定时间浏览您的网站后如何打开弹出窗口。我还强调了围绕此方法的可用性和可访问性问题。

如果您有任何意见或疑问，欢迎在下面的评论中听到。如果您对代码有任何疑问，或者在自己的网站上难以实现，建议您在SitePoint论坛的JavaScript类别中发布问题。

翻译自: https://www.sitepoint.com/show-modal-popup-after-time-delay/

hui模态框延时关闭弹出框

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hui模态框延时关闭弹出框_快速提示：延时后显示模态弹出窗口

hui模态框延时关闭弹出框在下面的快速提示中，我将向您展示在短暂的延迟后如何在网页上打开模式窗口。这对于突出特定的号召性用语可能很有用，例如注册新闻通讯或在Facebook上获得喜欢。一些网站也使用这种技术来显示广告。但在继续之前，请花一秒钟时间问自己是否真的需要这样做。每当我正在浏览的网站打开模式而没有点击任何东西时，我几乎总是立即关闭它，并感到烦恼的是我的注意力从我正在查看的内...
复制链接

扫一扫