User-Profile-Image
hankin
  • 5
  • 首页
  • 友人
  • 留言
  • 分类
    • 网络技术
    • 公告
    • WordpPress
  • 页面
    • 分类归档
    • 友人帐
    • 留言簿
  • 友链
    • 技术松鼠
    • 松子分享
    • 梨花町の肾兄さん
Help?

Please contact us on our email for need any support

Support
  • 松鼠API
  • 松鼠导航
  • 松鼠工具箱
    首页   ›   网络技术   ›   正文
网络技术

文本复制监听,右上弹窗提示

2021-04-04 14:27:53
88  0 2

在网上苦苦寻找,终于找到了精美的弹窗提示,稍微修改适配复制弹窗提示。

一、效果展示

有四种样式:success、error、info、warning,效果类似:仿win10侧边滑出提示框

二、实现方式

1、网站头部引入js和css

<script src="https://szfx.top/js/toastr.js"></script>
<link rel="stylesheet" href="https://szfx.top/css/toastr.css" />

网站启用了防盗链,大家自己下载下来用吧!若网站没有引入jquery则要引入:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2、修改css样式

弹窗颜色和位置

.toast-top-right {
  top: 72px;
  right: 12px;
}
.toast-success {
  background-color: #7486E7;
}

3、添加复制监听函数

<script type="text/javascript">
function copy_remind(){
  toastr.success("撰文不易,请保留出处,谢谢!", "复制成功!");
  clear_toastr(1600); 
   // 动态设置消息提示时间
  function clear_toastr(time){
       setTimeout(
           function(){ 
               toastr.clear();
       }, time);
  }
}
document.addEventListener("copy",function(e){
  if(window.getSelection(0).toString()){
      copy_remind();  //若所选文本不为空则显示
  }  
  else{
    toastr.info("啊噢...你没还没选择文字呢!", "复制提示");  
  }
});  
</script>

三、参考资料

1、jquery插件库-jquery通知插件toastr

2、TinyMeng博客-js监听复制事件(Ctrl+C)并标注转载链接!

微海报

如本文对您有用,欢迎打赏作者,鼓励创作!

2 打赏
评论 (0)

点击这里取消回复。

欢迎您 游客  

szfx_blog
知识经验分享,成长感悟记录。
5文章 0评论 8点赞 395浏览

目录
  • 一、效果展示
  • 二、实现方式
    • 1、网站头部引入js和css
    • 2、修改css样式
    • 3、添加复制监听函数
  • 三、参考资料
关注公众号
近期文章
  • WordPress | 网站添加公众号涨粉功能
  • 免费开源smarty_hankin主题优化教程
  • 自定义网站欢迎提示+右键菜单
  • 文本复制监听,右上弹窗提示
  • 关于本站
2021年4月
一 二 三 四 五 六 日
 1234
567891011
12131415161718
19202122232425
2627282930  
     
Copyright © 2021 松子博客 | 赣ICP备2020011452号-2
smarty_hankin 主题. Designed by hankin
主页
页面
  • 分类归档
  • 友人帐
  • 留言簿
博主
szfx_blog
szfx_blog 管理员
学习成长分享
5 文章 0 评论 395 浏览
测试
测试
Click to Copy
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付