网站被首次访问时，显示独立弹窗信息

网站被首次访问时，显示独立弹窗信息

标题起的很简短，其实就是根据记录的cookie，在每次新用户访问站点的时候，弹出一次性的公告，免去每次刷新页面都会出现是尴尬。这之前也是在别人站点看到的，用了一段时间，现在分享给大家

另外说一句，最近好多人都来扒站，虽然我没说什么，也制止不了，简单的东西你说什么剽窃也有些小题大做，但是心里总归是很难受，毕竟是一点一点抠出来的东西。扒了就扒了，但是扒了之后改个颜色换换样式，文字内容也针对改改，写心得时提提火喵的名字，给小站引引流，我也就很感谢了。

实际效果
方法

这个是通用的教程，任何html+css+js的博客都可以使用。

html

首先要知道，一般访问博客都是先从主页访问，所以我们这个代码就添加在主页文件（index.html）中即可。若是你觉得首次访问的内页也要显示的话，那就放在页面顶部（header.html）就好了。在<body>标签内合适的位置添加：

{cat_hide}

♾️ html 代码:
<div class="popup" id="note" style="display: none;">
    <div class="popup-icon"><img alt="love" src="https://cdn.jsdelivr.net/gh/zc998800/cdn/image/logo.webp"></div>
    <div class="popup-header">
        <h3 class="popup-title"> 『 你好，世界 』 </h3>
    </div>
    <div class="popup-main">
        <p>嘿！</p><p>欢迎到访<strong>火喵的博客</strong>，火喵会写写日记，发发博文，记录每一次的小美好，虽然最为个人博客，但是欢迎多多留言讨论</p><p>评论时请认真填写你的&nbsp;<strong>昵称</strong><strong>&nbsp;</strong><strong>邮箱</strong>，不要乱写&nbsp;<strong>无意义&nbsp;</strong>的评论，否则会直接<strong>拉黑封IP</strong>，因此请认真对待。</p><p>建议使用<strong>Ctrl+D</strong>收藏小站，或者浏览器右上角点<strong>安装应用</strong>来安装小站的小程序，手机来看会更加舒服哦~</p><p>灯火阑珊处，他蓦然回首，而我却隐藏在灯影里。</p>
    </div>
    <div class="popup-footer"><span class="popup-btn" onclick="closeclick()">好哒</span></div>
</div>

{/cat_hide}

如果显示 不正常，先确认有没有重复的样式明或id，对应修改即可。

对于css

css这个没什么好说的，每个人审美不同，想要的样式也不同。为了修改方便，我贴出本站现在用的样式

{cat_hide}

♾️ css 代码:
/*首页公告样式*/
.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-icon img {
    width: 300px;
    border: 0;
    vertical-align: middle;
}

.popup-icon {
    text-align: center;
    margin: -60px 0 0;
}

.popup-header {
    color: white;
    line-height: 40px;
    text-align: center;
}

.popup-main {
    padding: 20px;
}
.popup-main p {
    padding: 12px 0 0;
}
.popup-footer {
    padding: 10px 0 30px;
    text-align: center;
}
.popup-title {
    position: relative;
    font-size: 18px;
    font-weight: 900;
    display: inline-block;
}
.popup strong {
    color: var(--color-purple);
}
.popup-btn {
    font-weight: 700;
    border-radius: 50px;
    width: 100%;
    cursor: pointer;
    background: var(--color-purple);
    color: #fff;
    padding: 0 15px;
    line-height: 40px;
    font-size: 14px;
    display: inline-block;
}
.popup::after {
    content: '';
    height: 80px;
    width: 100%;
    background: var(--color-purple);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 18px 18px 0 0;
}

{/cat_hide}

javascript

js这个文件也是放在哪里就好了。

{cat_hide}

♾️ js 代码:
/* 首次访问弹窗 */
$(function(){
    if(window.localStorage.getItem("isClose") == 'yes'){
        $('#note')[0].style.display='none';
    }else
    {
         $('#note')[0].style.display='block';
    }
    
});
function closeclick()
{
   $('#note')[0].style.display='none';
   window.localStorage.setItem("isClose", "yes");
}

{/cat_hide}

留下评论