Lopwon POP 使用文档

版本型号

每套价格
官方演示
皮肤类型
显示页面
公告内容
间隔时长
发布时间
最新版本
我要购买
版本型号

Lopwon POP（Free）

免费
查看（无 Cookie 功能，关闭浮层后刷新页面，浮层重新出现）
Typecho 浮层插件
仅限首页显示
文本、链接、图片等
无 Cookie 功能
2022年11月05日
v1.1
免费下载
Lopwon POP（Free）

Lopwon POP（Pro）

4元
查看（插件设置 Cookie 间隔时长为5分钟，关闭浮层5分钟后刷新页面，浮层才会出现）
Typecho 浮层插件
可指定首页显示，或分类页、搜索页、标签页显示，或文章页、独立页显示，或全局显示
文本、链接、图片等
可设置用户关闭浮层后，再次显示浮层的间隔时长，即 Cookie 功能
2022年11月06日
v1.1
购买
Lopwon POP（Pro）

重要提示：付款时别忘了留下邮箱收取文件包，勿留 Gmail 邮箱。

注意：插件 Lopwon POP（Free）免费分发，请勿商用，且不对你在使用中产生的任何问题造成的不良后果，承担责任。

插件说明

Lopwon POP 分为免费版（Free）和增强版（Pro），是 Typecho 浮层插件，支持使用文本、链接、图片等方式呈现，支持指定首页或特定页面（增强版）显示，并且增强版（Pro）可使用 Cookie 设置关闭浮层后，再次显示浮层的间隔时长，以提高用户浏览页面时的体验。插件 Lopwon POP 可用于博客公告、广告等用途。

插件更新

2023年05月27日 发布 Lopwon POP v1.1 优化样式。

2022年11月06日 发布 Lopwon POP

使用方法

A 部署插件

1. 将压缩包里的文件夹 LopwonPOP 或 LopwonPOPPro 及其内部的所有文件，上传至目录 usr/plugins 中。

2. 后台》控制台》插件，找到 Lopwon POP (Free) 或 Lopwon POP (Pro) 并启用。

B 配置插件

后台》控制台》插件，找到 Lopwon POP (Free) 或 Lopwon POP (Pro) 并设置，依喜好设置即可。

提示：在（公告内容）里，不建议插入过多的内容，否则，会有 Y 滚动条出现。最美观的方案是：使用方形透明底 png 图片作为主视觉元素，外加一行文本即可。

C 使用技巧

使用HTML标签和属性，在（公告内容）里可以插入链接和图片等内容，以及自定义样式。其中，有些样式将沿用你的主题，例如：字体等，所以，有可能需要使用以下（示例四）的方法，自行微调样式。

1. 示例一，带链接的图片，如：


    <a href="跳转链接" target="_blank"><img src="图片链接" /></a>

2. 示例二，带链接的文本，如：


    <a href="跳转链接" target="_blank">文本内容</a>

3. 示例三，给文本分段，如：


    <p>文本内容一</p>
    <p>文本内容二</p>

4. 示例四，自定义字号，如：


    <style>.Lopwon_POP-content p {font-size: 18px;}</style>

网页版本

此项为延展使用，源于网友（小胖）提出的需求：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lopwon POP 网页版</title>
    
    <style>
    .Lopwon_POP-content *,
    .Lopwon_POP-content *::before,
    .Lopwon_POP-content *::after {
        box-sizing: inherit;
    }
    .Lopwon_POP-close {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0 0 0 / 85%);
        z-index: 999999998;
    }
    .Lopwon_POP-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        max-width: 480px;
        max-height: 90vh;
        text-align: center;
        font-size: 100%;
        color: white;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999999999;
    }
    .Lopwon_POP-content p {
        margin: 0.5em 0;
        padding: 0 1em;
        font-size: 1.2em;
    }
    .Lopwon_POP-content img {
        width: auto;
        height: auto;
        max-width: 480px;
        max-height: calc(90vh - 5em);
        border: none;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .Lopwon_POP-content img:hover {
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -ms-transform: scale(1.02);
        -o-transform: scale(1.02);
        transform: scale(1.02);
    }
    .Lopwon_POP-content a {
        color: orange;
        text-decoration: none;
    }
    .Lopwon_POP-content a:hover {
        color: white;
        outline-width: 0;
    }
    .Lopwon_POP-btn {
        position: absolute;
        top: calc(50% - 90vh / 2 + 2.5em);
        left: calc(50% + 480px / 2 + 2.5em + 0.5em);
        width: 5em;
        height: 5em;
        padding: 0.25em;
        border: 0.25em solid white;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 3em;
        background-color: rgb(255 255 255 / 25%);
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAADFBMVEVHcEz///////////8Gn9AKAAAAA3RSTlMAqlW1nzXGAAAAr0lEQVQ4y+2TwRWDIAyG1YuvU3QEV2CUbqKbdQWH6aEXpY8QMITvdQJzIQnke5D8DMNt/+1RnFdNLSGv47em3nte57NkpvjJzjNumhrjkZ01hnJM3bolBQKbC+DydcfCDEoDi9ISi9LIorSmQUnYoqSoRQmsRQnMoRLMoRLMoRLMoRLMoygFhYDvLwFXhQfBs/vmQAuh0TCOfmgwWhAAyKQXE0gOhAnyJZHDV7iN7QdsCYpJsPBiHAAAAABJRU5ErkJggg==");
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        cursor: pointer;
        opacity: .3;
    }
    .Lopwon_POP-btn:hover {
        opacity: 1;
    }
    @media screen and (max-width: 640px) {
        .Lopwon_POP-content {
            justify-content: flex-start;
            top: calc(50% - 50px);
            width: calc(100% - 1em);
            max-height: calc(50vh + 5em);
        }
        .Lopwon_POP-content img {
            max-width: calc(100vw - 2em);
            max-height: 50vh;
        }
        .Lopwon_POP-btn {
            top: calc(50% + (50vh + 5em) / 2);
            left: 50%;
        }
    }
    </style>
    
</head>

<body>

    <div class="Lopwon_POP-content" id="Lopwon_POP-content">
        <!-- 在此处编写 POP 内容 -->
    </div>
    
    <div class="Lopwon_POP-close" id="Lopwon_POP-close" onclick="Close()">
        <span class="Lopwon_POP-btn"></span>
    </div>

    <script>
    function Close() {
        document.getElementById('Lopwon_POP-content').style.display = 'none';
        document.getElementById('Lopwon_POP-close').style.display = 'none';
    }
    </script>

</body>
</html>

21 条评论

灼灼心 1 2023-12-08 17:03

已付款

Lopwon 博主 2023-12-08 17:08

@ 灼心

已发送。

1 18CX 11 2023-11-12 13:25

已经付款了

Lopwon 博主 2023-11-12 13:26

@ 18CX

人人类小徐 7 2023-10-19 17:07 noreply

怎么我一直收不到呢？

小小胖 1 2023-07-19 22:38

大佬，我想把它部署在html文件里面，能发我一份教程吗，谢谢大佬

Lopwon 博主 2023-07-20 09:14

@ 小胖

已更新，详见本页文档（网页版本）。

l lx 3 2023-06-19 22:19

240294****@qq.com

Lopwon 博主 2023-06-19 23:02

@ lx

纯纯属巧合 1 2023-04-24 17:14

105966****@qq.com

Lopwon 博主 2023-04-24 18:52

@ 纯属巧合

Lopwon 博主 2023-04-24 17:58

？

点点儿 21 2022-12-09 01:18 noreply

一如既往的风格

Lopwon POP 使用文档

2022-11-04

Lopwon POP（Free）

Lopwon POP（Pro）

21 条评论

视频：找到松茸了哦

有声：滇池湖畔，海鸥飞处

你知道这些蓝色小花的名字吗？

斯达舒，胃痛，一片，三次！