调用Handsome主题自带的弹窗实现复制弹窗及个性化提示

kenvie

发布于 2022-01-20 14:42:05

8490

发布于 2022-01-20 14:42:05

文章被收录于专栏：kenviekenvie

函数调用方式

通过深挖主题的js代码，我找到了调用的方式

$.message({
    message: "这里有我的实验室，子站点，项目展示和联系方式！",
    title: "欢迎来到秘密基地！",
    type: "info",
    autoHide: !1,
    time: "10000"
})

参数

title：弹窗的标题
message：弹窗标题下方的文字
type: 弹窗类型
autoHide：默认即可
time：停留时间（毫秒，1秒为1000毫秒）

弹窗类型

由于我没有太过于深挖主题的代码，所以目前大概知道有三种弹窗类型：

1.info

info效果

2.success

success效果

3.warning

warning效果

选择自己所需要的弹窗类型，填入type即可。

调用实例

以下是目前本站所使用的调用方式：

网站加载完成并提示

将以下代码填入 开发者设置 - 自定义输出body 尾部的HTML代码中

注意，要放在广告异步推送代码之前，放在后面可能会影响加载。

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "联系我：vip_8888888@126.com<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "5000"
})

</script>

复制成功之后弹窗提示

复制成功

将以下代码填入 开发者设置 - 自定义Javascript中

kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：陵南<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "success",
    autoHide: !1,
    time: "15000"
    })
}}

如果你开启了PJAX，那么需要在 主题设置 - PJAX - PJAX回调函数一栏内填入以下函数，然后保存即可。

kaygb_copy();1

独立页面或文章单独调用

此调用方式可实现在文章打开之后弹窗提示，我在我的独立页面 秘密基地

中便使用了这种方式，打开页面，右上角会出现一个弹窗

秘密基地

使用时，只需要在文章内插入可执行代码，也就是用三个英文感叹号包裹。

!!!

<script>
$.message({
    message: "这里有我的实验室，子站点，项目展示和联系方式！",
    title: "欢迎来到秘密基地！",
    type: "info",
    autoHide: !1,
    time: "10000"
})
</script>

!!!