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

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

函数调用方式

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

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

参数

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

弹窗类型

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

  1. info

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

  1. success

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

  1. warning

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

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

调用实例

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

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

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

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

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

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

复制成功之后弹窗提示

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

将以下代码填入开发者设置 》》 自定义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: "warning",
    autoHide: !1,
    time: "15000"
    })
}}

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

kaygb_copy();

独立页面或文章单独调用

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

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

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

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

!!!

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

!!!

关于弹窗时间

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