添加复制提示弹窗

Ginc
Ginc
管理员
66
文章
0
粉丝
建站开发2223阅读模式
前言

复制弹窗有很多种实现方法,知更鸟主题有自带的提示,但是对我来说还是不够个性,一个字,改!下面是两种弹窗的修改方法。

 文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

方法1:使用sweetalert.js库

复制下面的代码放到function文件中即可:文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

//复制成功提示
function copyright_tips() {
     echo '<link rel="stylesheet" type="text/css" rel="external nofollow" target="_blank" href="https://lyboy.oss-accelerate.aliyuncs.com/wordpress/css/sweetalert.min%20.css" >';
     echo '<script src="https://lyboy.oss-accelerate.aliyuncs.com/wordpress/js/sweetalert.min.js"></script>';
     echo '<script>document.body.oncopy = function() { swal("复制成功!", "转载请务必保留原文链接,申明来源,谢谢合作!!","success");};</script>';
}
add_action( 'wp_footer', 'copyright_tips', 100 );

注意:代码中  sweetalert.min.css  文件跟 sweetalert.min.js  提供文件下载,可以下载后上传到自己的对象存储或网站根目录,再修改链接。文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

效果图:文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

方法2:使用复制监听,右上角弹窗

1、在header.php文件中引入js和css。文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

<script src="https://lyboy.oss-accelerate.aliyuncs.com/wordpress/js/toastr.js"></script>
<link rel="stylesheet" href="https://lyboy.oss-accelerate.aliyuncs.com/wordpress/css/toastr.css" />

这里提供js跟css文件下载:文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

注意:如果网站没有引入jquery则需要额外引入文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

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

2、添加复制监听函数文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

在header.php中添加以下代码:文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

<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>

效果图:文章源自今夕何夕兮-https://www.ginc.site/building-and-development733.html

本文引用 方法1引用并修改自博客: 主机参考 网站 https://zhujicankao.com/   方法2引用并修改自博客 :松子分享  网站  https://www.szfx.top/  

转载请注明来自:今夕何夕兮
本站原创内容版权遵循 CC-BY-NC-SA4.0 协议授权,本站部分资源收集于网络,只做学习和交流使用,版权归原作者所有。

weinxin
提示:
若文章中图片、链接等信息出错,请及时反馈,博主将在第一时间更新。谢谢大家!
 
Ginc
  • 本文由 Ginc 发表于2022年9月25日
  • 转载请保留本文链接:添加复制提示弹窗:https://www.ginc.site/building-and-development733.html
评论  2  访客  2
    • 松鼠小
      松鼠小

      方法二资料原文:https://www.szfx.top/network-tech/copy-popupwindow.html

      • TeacherDu
        TeacherDu

        效果不错!

      匿名

      发表评论

      匿名网友
      确定

      拖动滑块以完成验证