✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 全局B2弹窗提醒样式美化
    返回列表 发布新帖
    查看: 44|回复: 0

    [代码技巧] 子比主题 – 全局B2弹窗提醒样式美化

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 524 颗
       贡献 : 1457 点
       金币 : 12 枚
    Icon在线时间 : 1294 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2025-10-29

    荣誉勋章

    会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    风云·优秀版主
    飞流名人堂成员

    1

    实名认证 手机认证 vip vip-year FLLTCN发表于 2025-10-10 16:32:39 | 查看全部 |阅读模式 浙江金华

    资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    这个是子比主题全局B2弹窗提醒样式的美化，可以看本站的复制、签到等等更多按钮，就是把子比默认的弹窗替换了B2样式美化，部署之前要确保之前没有引入过其他的弹窗样式，话不多说直接开始！

    tengfei_down - 2025-10-10T162929.569.webp


    代码部署



    一共三个地方的代码，跟着我的步骤走不会有问题，确保之前没有部署过其他的弹窗样式！
    CSS
    我们先丢CSS样式到：子比主题–>>自定义CSS样式即可！
    1. /*弹窗提醒*/
    2. .qmsg.qmsg-wrapper {
    3.   box-sizing:border-box;
    4.   margin:0;
    5.   padding:0;
    6.   font-size:13px;
    7.   font-variant:tabular-nums;
    8.   line-height:1;
    9.   list-style:none;
    10.   font-feature-settings:"tnum";
    11.   position:fixed;
    12.   top:136px;
    13.   left:0;
    14.   z-index:9999999;
    15.   width:100%;
    16.   pointer-events:none;
    17.   color:#000;
    18. }
    19. .qmsg .qmsg-item {
    20.   padding:8px;
    21.   text-align:center;
    22.   -webkit-animation-duration:.3s;
    23.   animation-duration:.3s;
    24.   position:relative;
    25. }
    26. .qmsg .qmsg-item .qmsg-count {
    27.   text-align:center;
    28.   position:absolute;
    29.   left:-4px;
    30.   top:-4px;
    31.   background-color:#FF3355;
    32.   color:#fff;
    33.   font-size:12px;
    34.   line-height:16px;
    35.   border-radius:2px;
    36.   display:inline-block;
    37.   min-width:16px;
    38.   height:16px;
    39.   -webkit-animation-duration:.3s;
    40.   animation-duration:.3s;
    41. }
    42. .qmsg .qmsg-item:first-child {
    43.   margin-top:-8px;
    44. }
    45. .qmsg .qmsg-content {
    46.   text-align:left;
    47.   position:relative;
    48.   display:inline-block;
    49.   padding:10px 16px;
    50.   background:#fff;
    51.   border-radius:4px;
    52.   box-shadow:0 4px 12px rgba(0,0,0,.15);
    53.   pointer-events:all;
    54.   max-width:80%;
    55.   min-width:80px;
    56. }
    57. .qmsg-content > div {
    58.   display:flex;
    59.   align-items:center;
    60. }
    61. .qmsg .qmsg-content [class^="qmsg-content-"] {
    62.   white-space:nowrap;
    63.   overflow:hidden;
    64.   text-overflow:ellipsis;
    65.   display:flex;
    66.   align-items:center;
    67. }
    68. .qmsg .qmsg-content .qmsg-content-with-close {
    69.   padding-right:20px;
    70. }
    71. .qmsg .qmsg-icon {
    72.   display:inline-block;
    73.   color:inherit;
    74.   font-style:normal;
    75.   text-align:center;
    76.   text-transform:none;
    77.   text-rendering:optimizeLegibility;
    78.   -webkit-font-smoothing:antialiased;
    79.   -moz-osx-font-smoothing:grayscale;
    80.   position:relative;
    81.   top:0;
    82.   margin-right:8px;
    83.   font-size:16px;
    84. }
    85. .qmsg .qmsg-icon svg {
    86.   display:inline-block;
    87. }
    88. .qmsg .qmsg-content-info .qmsg-icon {
    89.   color:#1890ff;
    90.   user-select:none;
    91. }
    92. .qmsg .qmsg-icon-close {
    93.   position:absolute;
    94.   top:11px;
    95.   right:5px;
    96.   padding:0;
    97.   overflow:hidden;
    98.   font-size:12px;
    99.   line-height:22px;
    100.   background-color:transparent;
    101.   border:none;
    102.   outline:none;
    103.   cursor:pointer;
    104.   color:rgba(0,0,0,.45);
    105.   transition:color .3s;
    106. }
    107. .qmsg .qmsg-icon-close:hover>svg path {
    108.   stroke:#555;
    109. }
    110. .qmsg .animate-turn {
    111.   animation:MessageTurn 1s linear infinite;
    112.   -webkit-animation:MessageTurn 1s linear infinite;
    113. }
    114. @keyframes MessageTurn {
    115.   0% {
    116.   -webkit-transform:rotate(0deg);
    117. }
    118. 25% {
    119.   -webkit-transform:rotate(90deg);
    120. }
    121. 50% {
    122.   -webkit-transform:rotate(180deg);
    123. }
    124. 75% {
    125.   -webkit-transform:rotate(270deg);
    126. }
    127. 100% {
    128.   -webkit-transform:rotate(360deg);
    129. }
    130. ;}@-webkit-keyframes MessageTurn {
    131.   0% {
    132.   -webkit-transform:rotate(0deg);
    133. }
    134. 25% {
    135.   -webkit-transform:rotate(90deg);
    136. }
    137. 50% {
    138.   -webkit-transform:rotate(180deg);
    139. }
    140. 75% {
    141.   -webkit-transform:rotate(270deg);
    142. }
    143. 100% {
    144.   -webkit-transform:rotate(360deg);
    145. }
    146. ;}@-webkit-keyframes MessageMoveOut {
    147.   0% {
    148.   max-height:150px;
    149.   padding:8px;
    150.   opacity:1;
    151. }
    152. to {
    153.   max-height:0;
    154.   padding:0;
    155.   opacity:0;
    156. }
    157. ;}@keyframes MessageMoveOut {
    158.   0% {
    159.   max-height:150px;
    160.   padding:8px;
    161.   opacity:1;
    162. }
    163. to {
    164.   max-height:0;
    165.   padding:0;
    166.   opacity:0;
    167. }
    168. ;}@-webkit-keyframes MessageMoveIn {
    169.   0% {
    170.   transform:translateY(-100%);
    171.   transform-origin:0 0;
    172.   opacity:0;
    173. }
    174. to {
    175.   transform:translateY(0);
    176.   transform-origin:0 0;
    177.   opacity:1;
    178. }
    179. ;}@keyframes MessageMoveIn {
    180.   0% {
    181.   transform:translateY(-100%);
    182.   transform-origin:0 0;
    183.   opacity:0;
    184. }
    185. to {
    186.   transform:translateY(0);
    187.   transform-origin:0 0;
    188.   opacity:1;
    189. }
    190. ;}@-webkit-keyframes MessageShake {
    191.   0%,100% {
    192.   transform:translateX(0px);
    193.   opacity:1;
    194. }
    195. 25%,75% {
    196.   transform:translateX(-4px);
    197.   opacity:0.75;
    198. }
    199. 50% {
    200.   transform:translateX(4px);
    201.   opacity:0.25;
    202. }
    203. ;}@keyframes MessageShake {
    204.   0%,100% {
    205.   transform:translateX(0px);
    206.   opacity:1;
    207. }
    208. 25%,75% {
    209.   transform:translateX(-4px);
    210.   opacity:0.75;
    211. }
    212. 50% {
    213.   transform:translateX(4px);
    214.   opacity:0.25;
    215. }
    216. ;}
    复制代码

    自定义底部HTML代码
    将下面的代码丢到：子比主题–>>自定义底部HTML代码即可，里面有一个引入的js代码，js你可以访问一下保存本地，如果不会我放到后面你自己下载js文件然后上传服务器拿路径就行！
    1. // 引入JS的message通知代码
    2. <script type="text/javascript" src="https://www.tfbkw.com/wp-content/themes/ZibTF/js/tengfei/message.min.js"></script>
    3. <script>
    4. // 通知
    5. // 全局变量用于存储加载消息实例
    6. var loadingMsgInstance = null;

    8. (function() {
    9.     function customNotyf(str, type, time, id) {
    10.         // 如果类型是 'danger'，统一转换为 'error'
    11.         if (type === 'danger') {
    12.             type = 'error';
    13.         }

    15.         // 设置默认类型和时间
    16.         type = type || 'success';
    17.         time = time || 5000;

    19.         // 如果时间小于 100，假设是以秒为单位，转换为毫秒
    20.         if (time < 100) {
    21.             time *= 1000;
    22.         }

    24.         var qmsgType;
    25.         switch (type) {
    26.             case 'success':
    27.                 qmsgType = 'success';
    28.                 closeLoadingMsg(); // 关闭加载中消息
    29.                 break;
    30.             case 'error':
    31.                 qmsgType = 'error';
    32.                 closeLoadingMsg(); // 关闭加载中消息
    33.                 break;
    34.             case 'warning':
    35.                 qmsgType = 'warning';
    36.                 closeLoadingMsg(); // 关闭加载中消息
    37.                 break;
    38.             case 'load':
    39.                 qmsgType = 'loading';
    40.                 if (!loadingMsgInstance) {
    41.                     loadingMsgInstance = Qmsg.loading(str || '正在处理中，请稍后...', { timeout: 0 });
    42.                 }
    43.                 return; // 加载中消息不需要设置超时
    44.             default:
    45.                 qmsgType = 'info';
    46.                 closeLoadingMsg(); // 关闭加载中消息
    47.         }

    49.         // 显示对应类型的通知
    50.         Qmsg[qmsgType](str, { timeout: time });
    51.     }

    53.     // 关闭加载消息的函数
    54.     function closeLoadingMsg() {
    55.         if (loadingMsgInstance) {
    56.             loadingMsgInstance.close(); // 关闭加载消息
    57.             loadingMsgInstance = null; // 清除引用
    58.         }
    59.     }

    61.     // 检查并覆盖 notyf 的实现
    62.     function overrideNotyf() {
    63.         if (typeof window.notyf !== 'undefined') {
    64.             window.notyf = customNotyf;
    65.             clearInterval(intervalId); // 停止轮询
    66.         }
    67.     }

    69.     // 每隔 100 毫秒检查一次是否已经定义了 notyf
    70.     var intervalId = setInterval(overrideNotyf, 100);
    71. })();

    73. </script>
    复制代码

    JS代码
    如果不会本地保存js，那么就下载附件，上传附件，然后路径记得调整好！
    2025-10-10 16:32 上传
    文件大小:
    9.12 KB
    下载次数:
    0
    下载积分:
    贡献 -50 点, 经验 1 值
    JS本地化文件
    关注作者后下载 检测资源
    严禁发布违规违法的信息内容链接，违者经审查后予以警告或封号处理！

    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-11-8 01:57 , Processed in 0.090660 second(s), 63 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表