给网站内添加一个弹窗公告

发布于 2022-09-12  424 次阅读


本文最后更新于2022年9月12日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

立即上代码

<!-- 弹窗公告开始-->
<script src="https://cbbkk.com/wp-content/themes/Sakura/js/sweetalert.min.js"></script>
<script>
swal('菜逼博客','公告弹窗代码演示\n\n','success');
</script>
<!-- 弹窗公告结束-->

复制上面的代码,保存到主题文件包footer.php 最底部结束代码上 保存即可。

中间的公告内容自己随便写吧,其中的js也可以自己下载保存在自己的服务器中,防止失效。网址为:

https://pan.cbbkk.com/sweetalert.min.rar

至于美观,自己用CSS美化一下。下面是个人的简单css美化代码

.swal-modal {
	background-image: url(https://cbbkk.com/api/mobile.php);
height: 100vh;
 height: 300px;
	    margin: 0;
    padding: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: -1;
}
.swal-icon--success__hide-corners {
	background-color: #fff0;
}
.swal-icon--success:after, .swal-icon--success:before {
	background: #fff0;
	}

复制放入 外观-自定义-额外css 保存即可