纸聊

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 32|回复: 0

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

[复制链接]

10

主题

0

回帖

32

积分

新手上路

Rank: 1

积分
32
huma13453 发表于 2024-2-14 14:48:43
在下面的快速提示中,我将向您展示如何在短暂延迟后在网页上打开模式窗口。这可能有助于突出显示特定的号召性用语,例如注册时事通讯或在 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 教程。现在,当键盘用户可以与它们交互吗?标记是语义的吗?他们容易被解雇吗?您可以在这里找到有关该主题的更全面的讨论:让模态窗口更适合每个人。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|小黑屋|纸聊

GMT+8, 2024-7-19 08:27 , Processed in 0.053680 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表