非常漂亮html公告弹窗代码
<style>.act-user-modal[data-v-627ce64e] {width: 900px;height: 570px;position: fixed;left: 50%;top: 50%;z-index: 9000;background: url(https://pic1.zhimg.com/80/v2-39b2a0ea3f338776b81d760e67d56027.png)no-repeat 50%;margin: -285px 0 0 -450px;}.act-user-modal .close[data-v-627ce64e] {position: absolute;top: -24px;right: 12px;width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 18px;border-radius: 50%;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.act-user-modal h3[data-v-627ce64e] {padding: 21px 0 0 92px;margin: auto;text-align: left;}.act-user-modal h3 img[data-v-627ce64e] {margin: 0;height: 50px;}.act-user-modal img[data-v-627ce64e] {display: block;margin: 0 auto;}.act-user-modal .center[data-v-627ce64e] {height: 240px;}.act-user-modal .center h1[data-v-627ce64e] {text-align: center;font-size: 34px;color: #333;margin: 0 auto;width: 700px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.act-user-modal .center .desc[data-v-627ce64e] {text-align: center;font-size: 20px;padding: 10px 0 10px;}dl,dt,li,ol,p,ul {margin: 0;padding: 0;font-style: normal;list-style: none;}.act-user-modal .center .nr[data-v-627ce64e] {width: 580px;text-align: center;font-size: 14px;line-height: 26px;color: #777;margin: auto;}.act-user-modal ul[data-v-627ce64e] {display: flex;width: 640px;margin: auto;justify-content: space-around;}.act-user-modal ul li[data-v-627ce64e] {width: 130px;color: #fff;text-align: center;}.act-user-modal ul li img[data-v-627ce64e] {margin-bottom: 10px;height: 72px;}.act-user-modal ul li .name[data-v-627ce64e] {font-size: 19px;font-weight: 700;margin-bottom: 10px;}.act-user-modal .btn[data-v-627ce64e] {width: 180px;height: 50px;background: #fff;border-radius: 37.5px;color: #df1f39;font-size: 19px;text-align: center;line-height: 50px;margin: auto;border: 0;display: block;position: relative;z-index: 0;top: 45px;cursor: pointer;}.act-user-modal-bg[data-v-627ce64e] {background: #000;opacity: 0.8;position: fixed;left: 0;z-index: 8999;top: 0;width: 100%;height: 100%;}
</style>
<div class="body" data-v-627ce64e="" data-v-a4fec598=""><div data-v-627ce64e="" class="act-user-modal"><span data-v-627ce64e="" class="close"><idata-v-f0f45c4c=""data-v-627ce64e=""class="iconfont icon-hide"style="font-size: 30px; color: rgb(255, 255, 255)"></i></span><h3 data-v-627ce64e=""></h3><div data-v-627ce64e="" class="center"><h1 data-v-627ce64e="">活动公告</h1><p data-v-627ce64e="" class="desc">资源宝分享</p><div data-v-627ce64e="" class="nr">资源宝分享</div></div><ul data-v-627ce64e=""><li data-v-627ce64e=""><imgdata-v-627ce64e=""src="https://pic1.zhimg.com/80/v2-1a9f0323bbe2979a5024f6ca3f5086c3.png"/><p data-v-627ce64e="" class="name">资源宝分享</p><p data-v-627ce64e="" class="test">资源宝分享</p></li><li data-v-627ce64e=""><imgdata-v-627ce64e=""src="https://pica.zhimg.com/80/v2-cc15bce1fe246b5d0971fc338a8771ad.png"/><p data-v-627ce64e="" class="name">资源宝分享</p><p data-v-627ce64e="" class="test">资源宝分享</p></li><li data-v-627ce64e=""><imgdata-v-627ce64e=""src="https://picx.zhimg.com/80/v2-b5a6e61819d4bd9557b506958af44332.png"/><p data-v-627ce64e="" class="name">资源宝分享</p><p data-v-627ce64e="" class="test">
资源宝分享</p></li></ul><button data-v-627ce64e="" class="btn" onclick="handleClick()">我知道了~</button></div><div data-v-627ce64e="" class="act-user-modal-bg"></div>
</div><script>function handleClick() {document.querySelector('.body').style.display = 'none';}
</script>
