6月24日
网站LOGO 六月是只猫 - 互联网技术分享指南
生活,一半家长里短,一半山川湖海...
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    一天只弹一次很漂亮的弹窗公告
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    www.lyszm.com

    一天只弹一次很漂亮的弹窗公告

    六月是只猫 · 原创 ·
    日常 · 暂无标签
    共 6311 字 · 约 2 分钟 · 1701

    图片示例

    演示

    效果  如点击没反应请强制刷新浏览器即可

    使用教程:

    css放在主题自定义css里或者放服务器直接调用css

    css 代码:
    /* 六月是只猫-公告 */
    .btn-large,.load-all,.popup-btn,.popup-btn-o,.page-number
    {
        padding:0 15px;
        line-height:40px;
        font-size:14px;
        display:inline-block;
        border-radius:10px
    }
    .btn-gray:hover,.more:hover,.load-all:hover,.module-tab-item:hover,.module-blocklist a:hover,.video-info-aux .tag-link:hover,.page-number:hover
    {
        background:#eaedf1
    }
    .btn-main,.popup-btn
    {
        background:#4e7cf2;
        color:#fff
    }
    .popup
    {
        box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important;
        padding:0 30px;
        background:#fff;
        width:400px;
        position:fixed;
        top:50%;
        left:50%;
        z-index:999999;
        transform:translateX(-50%) translateY(-50%);
        margin:0 auto;
        border-radius:18px
    }
    .popup::after
    {
        content:'';
        height:80px;
        width:100%;
        background:#eaedf1;
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
        border-radius:18px 18px 0 0
    }
    .popup-header
    {
        line-height:40px;
        text-align:center
    }
    .popup-title
    {
        position:relative;
        font-size:18px;
        font-weight:900;
        display:inline-block
    }
    .popup-title::after
    {
        content:'';
        position:absolute;
        width:100%;
        height:30%;
        background:#fde6dd;
        border-radius:5px;
        left:0;
        bottom:5px;
        z-index:-1
    }
    .close-popup:hover
    {
        background:#fff
    }
    .close-popup i
    {
        transform:scale(.88);
        font-size:12px;
        color:#fff
    }
    .close-popup:hover i
    {
        color:#ff2a14
    }
    .popup-icon
    {
        width:100%;
        text-align:center;
        height:220px;
        margin:-60px 0 0
    }
    /*www.lyszm.com*/
    .popup-icon img
    {
        height:220px
    }
    .popup-main
    {
        padding-bottom:20px
    }
    .popup-main p
    {
        padding:12px 0 0
    }
    .popup-main p a
    {
        color:#ff2a14
    }
    .popup strong
    {
        color:#ff2a14
    }
    .popup-footer
    {
        padding:10px 0 30px;
        text-align:center
    }
    .popup-footer p
    {
        margin-top:10px
    }
    .popup-btn
    {
        font-weight:700;
        border-radius:50px;
        width:100%;
        cursor:pointer
    }
    .popup-btn-o
    {
        color:#ff2a14;
        font-weight:700;
        width:50%;
        margin:5px 5px;
        cursor:pointer
    }
    .popup-btn-o::after
    {
        border-color:#ff2a14;
        border-radius:50px
    }
    .popup-msg
    {
        position:fixed;
        width:280px;
        z-index:9999999;
        height:auto;
        padding:30px;
        top:50%;
        left:50%;
        margin:-50px 0 0 -140px;
        text-align:center;
        color:#fff;
        background-color:rgba(7,7,10,.92);
        border-radius:10px
    }
    .popup-tips::after
    {
        background:0 0
    }

    js放在主题自定义js里或者放服务器直接调用js

    JS 代码:
    /* 六月是只猫-公告 */
    function cookiesave(n, v, mins, dn, path)
    {
        if (n)
        {
            if (!mins) {
                mins = 24 * 60;
            }
            if (!path) {
                path = "/";
            }
            var date = new Date();
            date.setTime(date.getTime() + (mins * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
            if (dn) {
                dn = "domain=" + dn + "; ";
            }
            document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path;
        }
    }
    function cookieget(n)
    {
        var name = n + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++)
        {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1, c.length);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return ""
    }
    function closeclick()
    {
        document.getElementById('note').style.display = 'none';
        cookiesave('closeclick', 'closeclick', '', '', '')
    }
    function clickclose()
    {
        if (cookieget('closeclick') == 'closeclick') {
            document.getElementById('note').style.display = 'none'
        }
        else {
            document.getElementById('note').style.display = 'block';
        }
    }
    window.onload = clickclose;

    html调用放入head或foot即可

    此处内容,需回复之后可见

    声明:本文由 六月是只猫(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    5

    条评论
    发一条!
    1. 头像
      866
      头像 866
      • 等级:Lv.2
      • 角色:访客
      • 在线:三月内

      看看看看看看

      · · · 广东-潮州
    2. 头像
      Long He
      • 等级:Lv.3
      • 角色:志同道合 · 好友
      • 在线:三月内

      好用!

      · · · 海外
    3. 头像
      66
      头像 66
      • 等级:Lv.2
      • 角色:访客
      • 在线:本月

      看看

      · · · 河北-沧州
    4. 头像
      Long He
      • 等级:Lv.3
      • 角色:志同道合 · 好友
      • 在线:三月内

      看看

      · · · 云南-昆明
    5. 头像
      33
      头像 33
      • 等级:Lv.1
      • 角色:访客
      • 在线:三月内

      评论看看

      · · · 江苏-南京
    博客logo 六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海... 51统计 百度统计
    MOEICP 萌ICP备20248888号 ICP 京ICP备2022028403号-1 ICP 京公网安备 11010502051304号 又拍云 本站由又拍云提供CDN加速/云存储服务 无畏云 本站由无畏云赞助高防CDN/安全防护和加速服务

    🕛

    本站已安全运行 1 年 226 天 10 小时 4 分
    六月是只猫 - 互联网技术分享指南. © 2022 ~ 2024.
    网站logo

    六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海...
     
     
     
     
    壁纸