简单但漂亮的网站弹窗的源码

UI还是非常不错,比较简洁,以直接放到网站需要的地方就可以了,打开网站就会显示这样一个弹窗,适合发一些公告之类的告示,有基础的可以自己改一下PC和Wap端的样式。或者加个cookie,一天仅显示一次之类的。

源码演示

源码

<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">
        这是114源码分享出来的弹窗代码
    </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>
声明:
1.本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。请发送邮件至:chensi2024@foxmail.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明
4.如下载链接失效,请在当前页留言或私信管理员,24小时必处理结束!
5.本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
6.本站提供的资源仅限用于学习交流和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除。

给TA打赏
共{{data.count}}人
人已打赏
技术教程

jsdelivr npm CDN 国内加速节点

2023-11-1 14:14:09

技术教程

宝塔面板后台访问卡顿软件商店加载不出来问题解决方案!

2024-3-10 10:35:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索