这个原创是由星雨博客站长做的，最初是打算做成冒泡上浮的那种效果，后来觉得简洁的弹窗更为合适，这个弹窗我一共做了三种效果，才呈现出来现在的效果，有能力的小伙伴可进行二次开发创作，那么废话不多说，直接来看效果！

第一款

第二款

第三款

更新日志

2025-02-23

• 修改了代码逻辑，有效减少了大量请求
• 右上角新增跳转按钮，链接到相关音乐页面

代码部署

本文隐藏内容

一共有两款，喜欢哪个就部署哪一个，我觉得第一个不错，因为带有头像，看起来更美观点，话不多说直接教程部署！

两款的部署方式一样，我们到WP后台–>>外观–>>小工具–>>自定义HTML，喜欢哪个就把代码放里面，然后我们将自定义HTML放到：所有页面-底部全宽度这个位置第一款第二款第三款

<strong><</strong>div id="wniui-popup-window" <strong>class</strong>="wniui-show-popup-window"<strong>></strong>  <strong><</strong>div <strong>class</strong>="wniui-popup-header"<strong>></strong>      <strong><</strong>div <strong>class</strong>="wniui-popup-window-title"<strong>></strong>网易云热评<strong><</strong>/div<strong>></strong>      <strong><</strong>span id="wniui-popup-username"<strong>><</strong>/span<strong>></strong>      <strong><</strong>a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; right: 10px;"<strong>></strong>          <strong><</strong>svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" <strong>class</strong>="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22033"              xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30"<strong>></strong>              <strong><</strong>path                  d="M512.1 137.8c-206.4 0-373.7 167.3-373.7 373.7s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7zM721 508.5L589.2 647c-9.9 10.4-27.4 3.4-27.4-11v-90.9h-1.4c-130.9 0-239.1 58.4-259.2 134.7h-2.3c12.8-133.2 125-237.4 261.5-237.4 0.5 0 0.9 0.1 1.4 0.1V359c0-14.4 17.5-21.4 27.4-11L721 486.6c5.8 6.2 5.8 15.8 0 21.9z"                  fill="#231815" p-id="22034"<strong>><</strong>/path<strong>></strong>          <strong><</strong>/svg<strong>></strong>      <strong><</strong>/a<strong>></strong>  <strong><</strong>/div<strong>></strong>  <strong><</strong>div <strong>class</strong>="wniui-popup-window-divider"<strong>><</strong>/div<strong>></strong>  <strong><</strong>div <strong>class</strong>="wniui-popup-window-content"<strong>></strong>  <strong><</strong>/div<strong>></strong><strong><</strong>/div<strong>></strong><strong><</strong>style<strong>></strong>  #music-link:hover svg path {  fill: #425AEF;  transition: .3s;<strong>}</strong>  #wniui-popup-window {      min-width: 300px;      max-width: 500px;      bottom: 20px;      right: 20px;      position: fixed;      z-index: 1002;      color: #363636;      padding: 8px 16px;      border-radius: 12px;      transition: opacity 0.3s ease, transform 0.3s ease;      background-color: rgba<strong>(</strong>255, 255, 255, 0.85<strong>)</strong>;      border: 1px solid #e3e8f7;      max-height: 300px;      opacity: 0;      transform: translateY<strong>(</strong>20px<strong>)</strong>;      display: flex;      flex-direction: column;      justify-content: flex-start;  <strong>}</strong>  #wniui-popup-window.wniui-show {      opacity: 1;      transform: translateY<strong>(</strong>0<strong>)</strong>;  <strong>}</strong>  #wniui-popup-header {      display: flex;      align-items: center;      gap: 8px;      position: relative;  <strong>}</strong>  #wniui-popup-window .wniui-popup-window-title {      font-size: 12px;      font-weight: 700;      color: #fff;      line-height: 1;      background: #363636;      padding: 4px;      border-radius: 4px;      display: inline-block;  <strong>}</strong>  #wniui-popup-username {      font-size: 12px;      color: #666;      line-height: 1;      margin: 0;      white-space: nowrap;  <strong>}</strong>  #wniui-popup-window .wniui-popup-window-divider {      width: 100%;      margin-top: 6px;      border: 1px solid #e3e8f7;  <strong>}</strong>  #wniui-popup-window .wniui-popup-window-content {      font-size: 15px;      display: flex;      justify-content: space-around;      word-wrap: break-word;      max-width: 450px;      margin-top: 5px;      overflow: auto;  <strong>}</strong>  #wniui-popup-window .wniui-popup-image {      width: 50px;      height: 50px;      border-radius: 50%;      margin-right: 10px !important;  <strong>}</strong>  #wniui-popup-window .wniui-popup-window-content p {      margin: 0;      display: -webkit-box;      -webkit-box-orient: vertical;      overflow: hidden;      -webkit-line-clamp: 2;      text-overflow: ellipsis;  <strong>}</strong>  #wniui-popup-window:hover {      border: 1px solid #425AEF;  <strong>}</strong>  #wniui-popup-window .wniui-popup-window-title:hover {      background-color: #425AEF;  <strong>}</strong><strong><</strong>/style<strong>></strong><strong><</strong>script<strong>></strong>async <strong>function</strong> fetchPopupContent<strong>()</strong> <strong>{</strong>  <strong>if</strong> <strong>(</strong>window.innerWidth <strong><</strong>= 768<strong>)</strong> <strong>{</strong>      document.getElementById<strong>(</strong>"wniui-popup-window"<strong>)</strong>.style.display = "none";      <strong>return</strong>;  <strong>}</strong> <strong>else</strong> <strong>{</strong>      document.getElementById<strong>(</strong>"wniui-popup-window"<strong>)</strong>.style.display = "flex";  <strong>}</strong>  <strong>try</strong> <strong>{</strong>      const response = await fetch<strong>(</strong>"https://www.wniui.com/api/music/index.php"<strong>)</strong>;      const data = await response.json<strong>()</strong>;      const <strong>{</strong> musicLink, comments <strong>}</strong> = data;      const <strong>{</strong> nickname, avatarUrl, content <strong>}</strong> = getRandomComment<strong>(</strong>comments<strong>)</strong>;      const popup = document.getElementById<strong>(</strong>"wniui-popup-window"<strong>)</strong>;      popup.classList.remove<strong>(</strong>"wniui-show"<strong>)</strong>;      setTimeout<strong>(()</strong> =<strong>></strong> <strong>{</strong>          document.getElementById<strong>(</strong>"wniui-popup-username"<strong>)</strong>.textContent = `- $<strong>{</strong>nickname<strong>}</strong>`;          document.querySelector<strong>(</strong>".wniui-popup-window-content"<strong>)</strong>.innerHTML = `              <strong><</strong>div style="display: flex; align-items: center;"<strong>></strong>                  <strong><</strong>img src="${avatarUrl}" alt="头像" <strong>class</strong>="wniui-popup-image" /<strong>></strong>                  <strong><</strong>div<strong>><</strong>p<strong>></strong>$<strong>{</strong>content<strong>}<</strong>/p<strong>><</strong>/div<strong>></strong>              <strong><</strong>/div<strong>></strong>          `;          const musicLinkElement = document.getElementById<strong>(</strong>"music-link"<strong>)</strong>;          musicLinkElement.href = musicLink;          popup.classList.add<strong>(</strong>"wniui-show"<strong>)</strong>;      <strong>}</strong>, 300<strong>)</strong>;  <strong>}</strong> <strong>catch</strong> <strong>(</strong>error<strong>)</strong> <strong>{</strong>      console.error<strong>(</strong>"获取数据失败:", error<strong>)</strong>;  <strong>}</strong><strong>}</strong>// 每 4 秒更新一次fetchPopupContent<strong>()</strong>;setInterval<strong>(</strong>fetchPopupContent, 4000<strong>)</strong>;<strong>function</strong> getRandomComment<strong>(</strong>comments<strong>)</strong> <strong>{</strong>  <strong>return</strong> comments<strong>[</strong>Math.floor<strong>(</strong>Math.random<strong>()</strong> <strong>*</strong> comments.length<strong>)]</strong>;<strong>}</strong><strong><</strong>/script<strong>></strong>