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

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

之前推荐过大弹窗形式：
网站文本复制，弹出版权提示标题很显然，今天给大家介绍的是：访客复制内容时弹出版权提示。介绍两种实现代码：一种较简单，效果也简单；一种稍复杂，效果也更佳。一、借助内置弹窗这种方法很简单，只需在 function.ph... 时间:2020/9/4 分类:网络技术 阅读:41

感觉有点碍眼，且不适配我当前的主题，于是有了下文。

一、效果展示

有四种样式：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();  //若所选文本不为空则显示
  }  
});  
</script>