原创弹窗公告代码美化版弹窗源代码

<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小时内删除!如有其它疑问请联系在线客服(微信公众号:轻狸团队 丨菜单栏人工客服)特别注意:访问本站即同意本站《免责声明&版权声明》,本站原创内容未经授权禁止转载!
全能资源库 » 原创弹窗公告代码美化版弹窗源代码

发表回复

提供最优质的资源集合,会员畅享0元下载!

立即开通 了解详情