听风君教你如何实现handsome主题自带的访问弹窗和复制弹窗及独立页面弹窗的效果。

访问弹窗
复制弹窗
独立页面弹窗

函数调用方式

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

参数

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

弹窗类型

  1. info

info

  1. success

succeess

  1. warning

warning

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

调用实例

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

加载弹窗
将以下代码填入开发者设置 → 自定义输出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: "3000"
})

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

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

kaygb_copy();

独立页面或文章单独调用

此调用方式可实现在文章打开之后弹窗提示，我在我的时光机页面、邻居页面、留言板页面使用了这种方式，打开页面，右上角会出现一个弹窗。

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

此段代码可以适用于文章内插入，但千万别像插入文章一样插入独立页面！ 

    !!!

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

!!!

独立页面模板添加代码（代码同上）

友情链接模板links.php添加代码位置

时光机模板cross.php添加代码位置

留言板模板guestbook.php添加代码位置

关于弹窗时间

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

但是根据风也的教程想要在独立页面实现弹窗还是不要直接在独立页面编辑内插入可执行代码（文章内调用除外），需要的还请添加代码到模板内来实现！

版权属于：文章内容经过听风君二次修改，原文及代码来自风也的小站

原文链接：https://eas1.cn/190.html

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名！

最后修改：2020 年 09 月 27 日 03 : 58 AM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏