快速提示：延时后显示模态弹出窗口

huma13453

在下面的快速提示中，我将向您展示如何在短暂延迟后在网页上打开模式窗口。这可能有助于突出显示特定的号召性用语，例如注册时事通讯或在 Facebook 上获得点赞。一些网站也使用这种技术来展示广告。 Pause Next Unmute Current Time Duration 2:00 Fullscreen 球拍和羽毛球之间不合时宜地弹出 但在继续之前，请花一点时间问问自己这是否是您真正需要做的事情。每当我浏览的网站在我没有点击某些内容的情况下打开一个模式时，我几乎总是立即关闭它，并且因为我的注意力被从我正在看的任何内容上转移而感到恼火。在我看来，此类技术可能会降低网站的整体体验，并且有更好的方法可以让访问者了解您的内容。


基本实现 还在读书吗？好吧，我想你已经决定这样做了，所以让我们开始吧。对于不耐烦的人，文章末尾有一个工作演示。 对于这个快速提示，我将使用Colorbox 插件来显示模式。 Colorbox 依赖于 jQuery，因此您还 华人华侨号码数据 必须将其添加到您的页面中。这是一个模板。 请注意，我使用各种 CDN 来包含此处的脚本，但您也可以使用包管理器（例如 npm 或 Bower）安装依赖项。 显示模态框 通常，我们会将 Colorbox 分配给 HTML 元素，并将任何设置作为对象内的键/值对传递然而，我们想直接调用 colorbox （而不将其分配给任何东西），因此语法略有不同 Colorbox 有很多选项（许多与显示图像相关），允许您自定义模式。



在下面的示例中，我指定它的尺寸，给它一个类名（这允许我使用 CSS 设计它的样式）并向它传递一个要显示的 HTML 字符串。您可以在上面链接的页面上找到完整的选项列表。 然后我们需要做的就是setTimeout在规定的时间过后，使用 JavaScript 的函数来调用这段代码。setTimeout()是一个原生 JavaScript 函数，它在指定的延迟（以毫秒为单位）后调用函数或执行代码片段。如果您想快速了解详细信息setTimeout()，那么您可以阅读此 SitePoint 教程。现在，当键盘用户可以与它们交互吗？标记是语义的吗？他们容易被解雇吗？您可以在这里找到有关该主题的更全面的讨论：让模态窗口更适合每个人。