为网站添加一个好看的弹窗
圆弧派博客 - 专注于网络技术

为网站添加一个好看的弹窗

青帝
2022-12-25 / 36 评论 / 774 阅读 / 正在检测是否收录...

效果图

tc.jpg

使用方法

head引入css/js:

<link rel="stylesheet" type="text/css" href="css/xqalert.css"> <!--弹窗css-->
        <script src="js/xqalert.min.js"></script><!--弹窗js-->

body中放:

<script>
      const xqAlert = {
              code: 1, //1代表开起公告,0代表关
              bgColor: "#7FCAEA", //公告背景颜色
              bgImg: "https://tuchuangs.com/imgs/2022/09/28/b2f9a6037dc38a08.png", //背景图片
              floatImg: "https://tuchuangs.com/imgs/2022/09/28/f249469b1d918abb.png", //海豚图片
              fontColor: "#fff", //字体颜色
              congg: `<p>欢迎来自: <span id="cname" style="color: #632EFF"></span>的朋友</p>
              <p>访问日期: <span id="times"></span></p>
              <p>访问设备: <span id="so"></span></p>`  //自定义公告内容区
           }
  
     </script>

css、js俩文件均已压缩在下面压缩文件中,懂的都懂,实在不懂可以评论区留下问题等会的人帮你

源码下载地址

评论 (36)

语录
取消
  1. 头像
    预备
    Android / Chrome /
    美国

    相恨不如潮有信,相思始觉海非深。

    回复
  2. 头像
    预备
    Android / Chrome /
    美国

    异地恋是,尝过欣喜若狂,也知道失魂落魄。QQ

    回复
  3. 头像
    云菟
    Android / Chrome /
    美国

    醒来,方知是梦,天色幽幽,怅然不已。

    回复
  4. 头像
    羚嘉
    Win 10 / Chrome /
    美国

    学习学习!

    回复
  5. 头像
    Android / Chrome /
    云南省

    人都有两面,一面天使,一面恶魔。

    回复
  6. 头像
    d
    Win 10 / Chrome /
    北京市

    世上本没有什么岁月静好,只是有人为你负重前行。

    回复
  7. 头像
    vivi
    Android / Chrome /
    北京市

    无论是丢下还是被丢下,这两者都是一样痛苦的。

    回复
  8. 头像
    宇生
    Win 10 / Chrome /
    北京市

    学习学习?

    回复
  9. 头像
    sa
    MacOS / Safari /
    重庆市

    学习

    回复
  10. 头像
    fddf
    Win 10 / Chrome /
    日本

    kakaka

    回复
  11. 头像
    222
    Android / Chrome /
    河北省

    kk

    回复
  12. 头像
    路过
    Win 10 / Chrome /
    辽宁省

    看看

    回复