原创弹窗公告代码美化版弹窗源代码
<div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;"><h3 style="font-weight: bold;text-align: center;font-size: 30px;">网站通知</h3><div style="font-size: 16px;margin-top: 26px;line-height: 30px;color: #999;">全能资源库已经正式更名,地址:www.qnzyk.com。也请各位广大网友互相转告,联系客服QQ:8888888</div><a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin: 0 auto;margin-top: 45px;border-radius: 32px;width: 80%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</ a></div></div><div class="web_notice" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 99999; "> <div style=" position: fixed; top: 50%; left: 50%; width: 550px; background: #FFF; transform: translate(-50%, -50%); border-radius: 40px; padding: 50px 40px; "> <h3 style=" font-weight: bold; text-align: center; font-size: 30px; ">网站通知</h3> <div style=" font-size: 16px; margin-top: 26px; line-height: 30px; color: #999; ">全能资源库已经正式更名,地址:www.qnzyk.com。也请各位广大网友互相转告,联系客服QQ:8888888</div><a style=" display: block; background: #98a3ff; color: #FFF; text-align: center; font-weight: bold; font-size: 19px; line-height: 60px; margin: 0 auto; margin-top: 45px; border-radius: 32px; width: 80%; " onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</ a> </div> </div>
网站有时候全局公告需要弹窗,这个弹窗较为漂亮,有需要的复制代码自取,只需黏贴到你的网站主页或者模板首页即可!
全能资源库丨本站资源除特殊声明外,均来自于网络收集整理仅供学习研究,如需商业使用请获得作者商业授权,如果侵犯了您的合法权益,请联系我们的投诉邮箱:qinglikf@163.com,我们将在24小时内删除!如有其它疑问请联系在线客服(微信公众号:轻狸团队 丨菜单栏人工客服)特别注意:访问本站即同意本站《免责声明&版权声明》,本站原创内容未经授权禁止转载!
全能资源库 » 原创弹窗公告代码美化版弹窗源代码
全能资源库 » 原创弹窗公告代码美化版弹窗源代码