实现复制弹窗优化
2024-05-07 8 评论 42 阅读 0 点赞

实现复制弹窗优化

heylie
2024-05-07 / 8 评论 / 42 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年05月08日,已超过148天没有更新,若内容或图片失效,请留言反馈。

开篇

本教程将向您介绍如何在网站中使用第二款复制提示功能。这个功能在用户复制内容时会弹出提示框,提醒用户转载时请保留原文链接。以下是实现此功能的代码和说明。

效果

1

代码

将以下代码添加到您的HTML文件中:

说明

1. 引入Toastr库的CSS和JS文件。这是一个用于显示提示消息的库。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/fzts/ts.css" />
2. 定义copy_remind函数。当用户复制内容时,此函数会被调用。它会显示一个成功提示,告诉用户转载时请保留原文链接。

3. 为copy事件添加事件监听器。当用户复制内容时,此事件监听器会检查所选文本是否为空。如果不为空,则调用copy_remind函数显示提示。如果为空,则显示一个提示用户选择复制内容的消息。

最后

现在,当用户在您的网站上复制内容时,将会看到一个提示框,提醒他们转载时请保留原文链接。

0

我来讲讲 (8)

取消
  1. 头像
    1
    Windows 10 · Google Chrome重庆市永川区 移动LAN

    感谢你的耐心写作和无私分享,希望你一直保持这样的精神

    回复
  2. 头像
    小李
    Windows 10 · Google Chrome重庆市永川区 移动LAN

    弱小和无知,不是生存的障碍,傲慢才是。

    回复
  3. 头像
    hua
    Windows 10 · Google Chrome重庆市永川区 移动LAN

    画图

    回复
  4. 头像
    nickl
    Windows 10 · Google Chrome重庆市永川区 移动LAN

    感谢

    回复
  5. 头像
    79877u8
    Windows 10 · Google Chrome重庆市永川区 移动LAN

    画图

    回复
  6. 头像
    sky
    Windows 10 · Google Chrome辽宁省 移动

    你的博客是我每天都会光顾的地方,因为我知道这里总有我需要的知识

    回复
  7. 头像
    十七
    Windows 10 · Google Chrome广西河池市 电信

    感谢作者分享这个实用的技巧,我会在我的生活中应用它

    回复
  8. 头像
    sdf
    Windows 10 · Google Chrome北京市 广电网

    画图

    回复