一款简洁大气的HTMl公告弹窗代码。

图片展示

教程开始

<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: 500px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
        <h3 style="font-weight: bold;text-align: center;font-size: 30px;">网站公告
            <div style="
    font-size: 16px;
    margin-top: 26px;
    line-height: 30px;
    color: #999;">网站公告
                </h3><br><br><div style="font-size:16px;line-height:30px;color: #999;"><b><font color="#ff0000">
                            欢迎光临执笔博客！
                        </font><br><br><font color="#005aff">
                            站长正常接单中，QQ3535540990
                        </font><br><br><font color="#ff0000"><!--永久会员限时588元，年费会员可补差价升级！截止9.1日-->
                            本站所有源码对永久VIP会员提供技术支持，<a href="/vip">点击加入</a></font><br><br><font color="#ff0000"><!--永久会员限时588元，年费会员可补差价升级！截止9.1日-->
                            本站所有资源仅作为学习研究测试，请勿商业使用，否则一切责任与本站无关!.</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>