一种简单的弹窗实现

发表于2023-08-29更新于2023-10-03

字数总计:196阅读时长:1分钟阅读量: 地球村评论数:

AI-摘要

切换

Eamo GPT

AI初始化中...

介绍自己 🙈

生成本文简介 👋

推荐相关文章 📖

前往主页 🏠

前往爱发电购买

学习分享技巧教程

一种简单的弹窗实现

YuanMo2023-08-292023-10-03

预览

实现代码

<div class="web_notice" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(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:700;text-align:center;font-size:30px">网站通知</h3>
        <div style="font-size:16px;margin-top:26px;line-height:30px;color:#999">路漫漫其修远兮，吾将上下而求索。</div>
        <a style="display:block;background:#98a3ff;color:#fff;text-align:center;font-weight:700;font-size:19px;line-height:60px;margin:0 auto;margin-top:45px;border-radius:32px;width:80%" onclick='document.querySelector(".web_notice").remove()'>我知道了</a>
    </div>
</div>