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: 320px; background: #FFF; transform: translate(-50%, -50%); border-radius: 40px; padding: 50px 40px;">
        <button style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;" onclick="closePopup();">×</button>
        <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;">
            公告内容：balabalabalabalabalabalabalabalabalabalabalabalabalabalabalabalabala<br><br>
            <p><a href="https://other.azad.asia" target="_blank" style="display: block; text-align: center; font-weight: bold; font-size: 19px; line-height: 60px; margin: 0 auto; margin-top: 45px; border-radius: 32px; width: 80%;" onclick="redirectUrlToActive();" rel='nofollow'>加一个跳转链接</a></p>
        </div>
    </div>
</div>
<script>
    function closePopup() {
        document.querySelector('.web_notice').style.display = 'none';
    }
</script>
<!-- 弹窗代码结束 -->