子比主题美化-复制提示样式

子比主题美化-复制提示样式

来自AI助手的总结
文章介绍了如何在Zibll主题设置中添加自定义JS和CSS代码以实现复制时自动添加版权声明及美化弹窗样式。

代码修改1

(1)在网站后台,Zibll主题设置 -> 全局&功能 -> 自定义代码
(2)在自定义底部HTML代码编辑框中添加以下代码:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<!-- 复制自动添加版权声明 -->
<script type="text/javascript">
    $(document).on("copy", function(e) {
      var selected = window.getSelection();
      var selectedText = selected.toString().replace(/\n/g, "<br>");
      var copyFooter =
          "<br>————————————————<br>" + 
          "原文链接:" +document.location.href + "<br>" +
          "版权所属:" +"本文为博主的原创文章,著作权归作者——xxxx。<br>" + 
          "版权声明:xxxx,转载请附上原文出处及本声明。<br>" 

      var msgContent =
          '<span style="font-weight: 1000;margin: 0 !important;font-size: 18px">复制成功</span>' + copyFooter;
      layer.msg(msgContent, {
        time: 2000,
        shift: 2,
        shade: 0.3,
        skin: "eden-layer-mode"
      });
      var copyHolder = $("<div>", {
        id: "temp",
        html: selectedText + copyFooter,
        style: {
          position: "absolute",
          left: "-99999px"
        }
      });
      $("body").append(copyHolder);
      selected.selectAllChildren(copyHolder[0]);
      window.setTimeout(function() {
        copyHolder.remove();
      }, 0);
    });
</script>

代码修改2

(1)在网站后台,Zibll主题设置 -> 全局&功能 -> 自定义代码
(2)在自定义css样式编辑框中添加以下代码:

/* 弹窗样式美化 */
.eden-layer-mode{
    background-image: linear-gradient(to right, #ffffff 0%, #d9ddff 100%);
    border:none !important;
    border-radius:8px !important
}

效果图

20250429141207696-image

 

 
 
温馨提示:本文最后更新于2025-04-29 14:18:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系 站长
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容