1、添加到index.php里
<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>评论时请认真填写你的 <strong>昵称</strong><strong> </strong><strong>邮箱</strong>,不要乱写 <strong>无意义 </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>
2、增加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; }
3、增加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"); }
转载请注明:邓先生工作室 » 分享 » 网站被首次访问时,显示独立弹窗信息
发表评论