飞流 发表于 2025-10-6 19:34:32

子比主题 – 网站文章内容弹窗提示(两款弹窗)

这是一篇给子比主题文章复制内容弹窗提示,一共做了两款,我觉得比较不错的两款弹窗,第二款的弹窗是在内容末尾加版权信息,喜欢的的自行部署吧!
第一款

第二款

代码部署
两款弹窗美化,跟着我的步骤走,不会有问题的,话不多说直接开始!
第一款
我们要将下面的代码放到:子比主题–>>自定义javascript代码即可!
/* 复制提示 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};然后我们将下面的代码放到:子比主题–>>自定义底部HTML代码即可!
<!-- 复制提示框 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>第二款
将下面的代码放到:子比主题–>>自定义底部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>" +
          "版权所属:" +"本文为博主的原创文章,著作权归作者——腾飞博客。<br>" +
          "版权声明:遵循CC 4.0 BY-SA协议,转载请附上原文出处及本声明。<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);
      window.setTimeout(function() {
      copyHolder.remove();
      }, 0);
    });
</script>然后将下面的代码放到:子比主题–>>自定义CSS样式即可!
/* 弹窗样式美化 */
.eden-layer-mode{
background-image: linear-gradient(to right, #ffffff 0%, #d9ddff 100%);
border:none !important;
border-radius:8px !important
}
页: [1]
查看完整版本: 子比主题 – 网站文章内容弹窗提示(两款弹窗)