如何调用handsome主题自带的弹窗提示实现复制弹窗提醒以及个性化提示

在前一段时间，我发布了一篇关于复制内容弹窗提醒的文章，当时使用的是layer，所以它几乎适用于所有的网站，而handsome主题却拥有一个自带的弹窗提示，我们却忽略掉了。使用handsome主题的童鞋完全不需要使用layer来作为提示弹窗，使用自带的即可！

用Layer和jQuery写了一个复制之后版权提醒的弹窗

函数调用方式

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

1
2
3
4
5
6
7

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

参数

1
2
3
4
5

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

弹窗类型

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

1. info

2. success

   

3. warning

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

调用实例

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

网站加载完成并提示来路URL

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "5000"
})

</script>

复制成功之后弹窗提示

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

1
2
3
4
5
6
7
8
9

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: "warning",
    autoHide: !1,
    time: "15000"
    })
}}

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

1

kaygb_copy();

独立页面或文章单独调用

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

!!!

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

!!!

关于弹窗时间

时间以毫秒计算，1000即代表着1秒，如果我们想让他显示十秒钟，time修改为10000即可！