网站被首次访问时,显示独立弹窗信息
 文章目录

原创

网站被首次访问时,显示独立弹窗信息

火喵酱
美化
2021年12月12日 45 评论 867 阅读 正在检测是否收录...

标题起的很简短,其实就是根据记录的cookie,在每次新用户访问站点的时候,弹出一次性的公告,免去每次刷新页面都会出现是尴尬。这之前也是在别人站点看到的,用了一段时间,现在分享给大家

另外说一句,最近好多人都来扒站,虽然我没说什么,也制止不了,简单的东西你说什么剽窃也有些小题大做,但是心里总归是很难受,毕竟是一点一点抠出来的东西。扒了就扒了,但是扒了之后改个颜色换换样式,文字内容也针对改改,写心得时提提火喵的名字,给小站引引流,我也就很感谢了。

实际效果

2021-12-12-10-12-43.webp

方法

这个是通用的教程,任何html+css+js的博客都可以使用。

html

首先要知道,一般访问博客都是先从主页访问,所以我们这个代码就添加在主页文件(index.html)中即可。若是你觉得首次访问的内页也要显示的话,那就放在页面顶部(header.html)就好了。在<body>标签内合适的位置添加:

如果显示 不正常,先确认有没有重复的样式明或id,对应修改即可。

对于css

css这个没什么好说的,每个人审美不同,想要的样式也不同。为了修改方便,我贴出本站现在用的样式

javascript

js这个文件也是放在哪里就好了。


- - - The END - - -

- - - 打 赏 - - -
版权属于: 火喵 ©
最后更新: 2021 年 12 月 12 日 10 时
解压密码: ✽✽✽✽✽✽
阅读时间: 本文共 544 个字数,平均阅读时长 ≈ 2分钟

共计 45 条评论,点此发表评论

人机验证

  1. 头像
    @
    河南
    Ramsong
    水手

    海员

    发评论看代码表情

  2. 头像
    @
    浙江
    松鼠小
    士官

    海员

    看起来不错呦表情

  3. 头像
    @
    四川
    不凡
    士官长

    海员

    发评论为了看代码表情

    1. 头像
      @
      四川
      不凡
      @ 不凡
      士官长

      海员

      高亮代码好像不见了,代码溢出到页面的右边了

      1. 头像
        @
        喵星
        火喵酱
        @ 不凡

        提督

        刷新就好了

        1. 头像
          @
          四川
          不凡
          @ 火喵酱
          士官长

          海员

          评论列表里的“气泡”在移动端也向右溢出了

          1. 头像
            @
            喵星
            火喵酱
            @ 不凡

            提督

            手机显示分辨率太低了,我也懒得改,不然一行才几个字表情

            1. 头像
              @
              四川
              不凡
              @ 火喵酱
              士官长

              海员

              表情格局小了.jpg

              1. 头像
                @
                喵星
                火喵酱
                @ 不凡

                提督

                不行啊,只能看到是华为手机,看不到分辨率

                1. 头像
                  @
                  四川
                  不凡
                  @ 火喵酱
                  士官长

                  海员

                  你在网站统计看我手机的分辨率吗?

                  1. 头像
                    @
                    喵星
                    火喵酱
                    @ 不凡

                    提督

                    嗯对,我查到了,380*823表情

                    1. 头像
                      @
                      四川
                      不凡
                      @ 火喵酱
                      士官长

                      海员

                      是这个分辨率,能调么?

                      1. 头像
                        @
                        喵星
                        火喵酱
                        @ 不凡

                        提督

                        可以调,但是字会变小,现在的习惯就好,还是别调了表情

                        1. 头像
                          @
                          四川
                          不凡
                          @ 火喵酱
                          士官长

                          海员

                          也是,目前我手机看评论列表的文字大小,正合适。

                          1. 头像
                            @
                            喵星
                            火喵酱
                            @ 不凡

                            提督

                            我简单改了一下,麻烦开一个浏览器隐私窗口看一下现在行不行,不行的话我就删掉最小尺寸

                            1. 头像
                              @
                              四川
                              不凡
                              @ 火喵酱
                              士官长

                              海员

                              可以了,表情按钮出来的窗口也要改下,表情的框也向右溢出了,第6列的表情只能看到半张脸。

                              1. 头像
                                @
                                喵星
                                火喵酱
                                @ 不凡

                                提督

                                嗯,现在可以了

                                1. 头像
                                  @
                                  四川
                                  不凡
                                  @ 火喵酱
                                  士官长

                                  海员

                                  完美!表情

          2. 头像
            @
            喵星
            火喵酱
            @ 不凡

            提督

            你是啥手机呀,我还是改一下吧表情

  4. 头像
    @
    福建
    ZMR
    士官长

    海员

    学习一下

    1. 头像
      @
      喵星
      火喵酱
      @ ZMR

      提督

      真好啊,我之前也想搞分销,但是没时间分散精力就放弃了

  5. 头像
    @
    北京
    Jane
    士官

    海员

    来学习一下

  6. 头像
    @
    北京
    rtwr
    水手

    海员

    o( ̄▽ ̄)d,跟大佬学习

  7. 头像
    @
    江西
    迷失
    士官

    海员

    看起来不错

  8. 头像
    @
    浙江
    松鼠小
    士官

    海员

    看起来不错呦:@(cat40)

  9. 头像
    @
    广西
    XCATX
    士官

    海员

    跟大佬学习表情

  10. 头像
    @
    山西
    kingkare
    士官

    海员

    学习一下 感谢大佬分享

  11. 头像
    @
    河南
    7Wate
    水手

    海员

    表情

  12. 头像
    @
    福建
    泠风寒声
    幕僚长

    鹦鹉螺号

    三副

    作家

    截图截到我了,开心ing表情

  13. 头像
    @
    台湾
    唯一
    水手

    海员

    wow

  14. 头像
    @
    上海
    山海团队
    水手

    海员

    终于找到评论的地方了,累死我了

    1. 头像
      @
      福建
      泠风寒声
      @ 山海团队
      幕僚长

      鹦鹉螺号

      三副

      作家

      duck不必表情

  15. 头像
    @
    云南
    小白兔
    士官

    海员

    原来如此,:@(tt09)