给B2添加私信弹窗

简介

这是一个用于B2主题的私信弹窗功能，由于默认私信消息提醒感知太弱，看到别人给自己发的私信时，基本都过了一俩月了！！！

之前折腾了几次简单的，这次干脆弄的像样点。

提前声明：本文为原创小功能，界面来自codepen.io修改，转载请注明来源。

原理

通过给私信标签添加固定样式，从而进行监控指定内容。

如果成立，就弹窗，不成立就隐藏。

代码使用方法如下 – 请按步骤修改代码

第一步：在子主题functions.php中添加如下代码，加载指定文件

// 修改私信提醒443行
require_once get_stylesheet_directory() . '/Modules/Templates/Footer.php';

第二步：根据上方文件路径，打开文件，找到以下代码

如果你子主题没有对应文件，在子主题中创建对应路径文件夹，然后去父主题复制对应文件到子主题内。

给代码中的有新私信和私信列表，前方的span样式中，添加额外样式名diy-sixin

详情看下方代码，也可以直接复制替换。

<?php if($aside_dmsg && !$audit) { ?>
    <div :class="['bar-item',{'active':showType.dmsg}]" @click="show('dmsg','<?php echo $dmsg_url;?>')">
          <b v-show="dmsg.count" class="bar-mark"></b>
          <?php echo b2_get_icon('b2-mail-send-line'); ?>
          <span class="bar-item-desc diy-sixin" v-if="dmsg.count"><?php echo __('有新私信','b2'); ?></span>
          <span class="bar-item-desc diy-sixin" v-else><?php echo __('私信列表','b2'); ?></span>
    </div>
<?php } ?>

第三步：在footer.php中，添加以下代码，添加位置如图

给B2添加私信弹窗

代码如下：

[content_hide]

<!--私信消息提醒-->
        <div id="container-sixin">
          <div id="success-box-sixin">
            <div class="dot-sixin"></div><div class="dot-sixin two-sixin"></div>
            <div class="face-sixin">
              <div class="eye-sixin"></div>
              <div class="eye-sixin right-sixin"></div>
              <div class="mouth-sixin happy-sixin"></div>
            </div>
            <div class="shadow scale-sixin"></div>
            <div class="message-sixin">
              <h1 class="alert-sixin">您有一条新私信</h1>
              <p>请前往查看</p>
            </div>
            <button class="button-box-sixin">
              <a href="/directmessage" target="_blank" id="view-message-link-sixin">查看私信</a>
            </button>
          </div>
        </div>

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('container-sixin');
            const messageIndicator = document.querySelector('.diy-sixin');
            const viewMessageLink = document.getElementById('view-message-link-sixin');
        
            function showNotification() {
              if (container) { // 确保元素存在
                container.style.bottom = '0';
              }
            }
        
            function hideNotification() {
              if (container) { // 确保元素存在
                container.style.bottom = '-300px';
              }
            }
        
            function checkMessageIndicator() {
              if (messageIndicator && container) { // 确保两个元素都存在
                if (messageIndicator.textContent.trim() === '有新私信') {
                  showNotification();
                } else if (messageIndicator.textContent.trim() === '私信列表') {
                  hideNotification();
                } else {
                  hideNotification(); // 默认隐藏
                }
              }
            }
        
            // 初始加载时检查
            checkMessageIndicator();
        
            // 监听 .diy-sixin 内容的变化
            const observer = new MutationObserver(checkMessageIndicator);
            if (messageIndicator) {
              observer.observe(messageIndicator, { childList: true, characterData: true, subtree: true });
            }
        
            // 点击查看私信按钮后隐藏通知
            if (viewMessageLink && container) {
              viewMessageLink.addEventListener('click', hideNotification);
            }
          });
        </script>
        <!--私信消息提醒结束-->

第四步：在style.css中，添加样式代码

由于代码中兼容了手机端（直接隐藏），如果不想兼容，可以自行找AI帮你取消兼容

/**************************************** 私信消息弹窗开始 ********************************************/
/*修改右侧侧边栏位置避免遮挡*/

.bar-middle {
    bottom: 30%!important;
}

/* 桌面端样式 */
  @media (min-width: 769px) {
    #container-sixin {
      position: fixed;
      right: 20px;
      bottom: -300px;
      margin: 0;
      overflow: hidden;
      z-index: 999;
      width: 200px;
      height: 250px;
      transition: bottom 0.5s ease-in-out;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
    }

    .green-sixin {
      color: #4ec07d;
    }

    .alert-sixin {
      font-weight: 700;
      letter-spacing: 5px;
      font-size: 1em;
      padding-top: 5px;
      color: #fcfcfc;
      padding-bottom: 5px;
      text-transform: uppercase;
      margin: 0;
      text-align: center;
    }

    .message-sixin p {
      margin-top: 10px;
      font-size: 0.8em;
      font-weight: 400;
      color: #5e5e5e;
      letter-spacing: 1px;
      margin-bottom: 15px;
      text-align: center;
    }

    button-sixin,
    .dot-sixin {
      cursor: pointer;
    }

    #success-box-sixin {
      width: 200px;
      height: 250px;
      background: linear-gradient(to bottom, #b0db7d, #99dbb4);
      border-radius: 10px 10px 0 0;
      box-shadow: none;
      perspective: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .dot-sixin {
      width: 10px;
      height: 10px;
      background: #fcfcfc;
      border-radius: 50%;
      position: absolute;
      top: 15px;
      right: 20px;
    }
    .dot-sixin:hover {
      background: #c9c9c9;
    }

    .two-sixin {
      right: 45px;
      opacity: 0.5;
    }

    .face-sixin {
      width: 50px;
      height: 50px;
      background: #fcfcfc;
      border-radius: 50%;
      border: 2px solid #777777;
      z-index: 2;
      animation: bounce-sixin 1s ease-in infinite;
      margin-bottom: 15px;
    }

    .eye-sixin {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #777777;
      border-radius: 50%;
      top: 35%;
      left: 25%;
    }

    .right-sixin {
      left: 65%;
    }

    .mouth-sixin {
      position: absolute;
      top: 55%;
      left: 40%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .happy-sixin {
      border: 2px solid;
      border-color: transparent #777777 #777777 transparent;
      transform: rotate(45deg);
      width: 15px;
      height: 15px;
      top: 50%;
      left: 38%;
    }

    .shadow {
    position: absolute;
    width: 26%;
    height: 3%;
    opacity: 0.5;
    background: #777777;
    left: 37%;
    top: 34%;
    border-radius: 50%;
    z-index: 1;
    animation: scale-sixin 1s ease-in infinite; /* 缩放动画 */
  }
  
  #view-message-link-sixin{
      width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 40px;
  }
  
  
    .shadow-sixin {
      display: none;
    }

    .message-sixin {
      text-align: center;
    }

    .button-box-sixin {
      background: #fcfcfc;
      width: 60%;
      height: 40px;
      border-radius: 20px;
      outline: 0;
      border: none;
      box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
      transition: all 0.3s ease-in-out;
      font-size: 1em;
      font-weight: bold;
      color: #4ec07d;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
    }
    .button-box-sixin:hover {
      background: #efefef;
      transform: scale(1.02);
    }

    @keyframes bounce-sixin {
  50% {
    transform: translateY(-5px);
  }
}

@keyframes scale-sixin {
  50% {
    transform: scale(0.95);
  }
}

  /* 移动端和平板样式 - 隐藏提示和容器 */
  @media (max-width: 768px) {
    .diy-sixin,
    #container-sixin {
      display: none !important;
    }
  }

  .diy-sixin {
    display: none; /* 初始时隐藏该元素 */
  }

/**************************************** 私信消息弹窗结束 ********************************************/

[/content_hide]

具体界面样式、显示文字等都可以自行修改，会css就行了。
同时此功能也可以用在顶部的消息上，这要你自己改改了，不过消息里基本都是些积分通知，感觉无关紧要了。
比如可以添加判断，把你有一条新私信那里改为变量，通过判断修改为消息或私信。
动态修改按钮地址，这个比较麻烦了，感觉没什么必要，你可以自己折腾折腾