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

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

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

效果图

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俩文件均已压缩在下面压缩文件中,懂的都懂,实在不懂可以评论区留下问题等会的人帮你

源码下载地址

评论 (23)

语录
取消
  1. 头像
    vgvg
    Win 10 / Chrome /
    香港

    给,一辈子朋友劵。

    回复
  2. 头像
    vgvg
    Win 10 / Chrome /
    香港

    为你的生命找到一个长期的、深层的、不能被满足的乐趣,让这个永恒乐趣带领你穿透生命的无常。

    回复
  3. 头像
    1
    Win 10 / Chrome /
    美国

    浮云一别后,流水十年间。QQ

    回复
  4. 头像
    katelya
    Win 10 / Chrome /
    江西省

    为什么我添加了之后不显示访问设备和IP识别地点啊

    回复
    1. 头像
      青帝 作者
      Win 7 / Chrome /
      美国
      katelya

      刚试了一下没问题啊,是不是浏览器设置的问题

      回复
      1. 头像
        katelya
        Win 10 / Chrome /
        美国
        青帝

        方便问一下博主您用的是什么主题吗

        回复
        1. 头像
          青帝 作者
          Win 7 / Chrome /
          美国
          katelya

          Joe主题,不过自己魔改了一下

          回复
      2. 头像
        katelya
        Win 10 / Chrome /
        美国
        青帝

        行吧,应该是我网站的原因吧

        回复
  5. 头像
    katelya
    Win 10 / Chrome /
    江西省

    路过的熟悉,如同有你,已无转身的距离。

    回复
  6. 头像
    蝌蚪
    iPhone / Safari /
    广东省

    不要在晚上做出任何决定。

    回复
  7. 头像
    夜猫子
    MacOS / Safari /
    美国

    予力众生,成就不凡。

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

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

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

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

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

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

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

    学习学习!

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

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

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

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

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

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

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

    学习学习?

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

    学习

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

    kakaka

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

    kk

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

    看看

    回复