自定义百度爱番番咨询按钮，实现当前页面弹窗并阻止默认行为

之前实现了当前页面咨询弹窗，发现百度爱番番的id选择器失效了，过去有用的是#nb_icon_wrap /#nb_invite_ok这两个

jQuery(function($) {
    $(".bdzixun").click(function(event) {
        if ($("#nb_invite_ok").length > 0) {
            $("#nb_invite_ok").click();
        }
    });
});

最近不仅发现没用了，而且需求也变了，增加自定义百度咨询的按钮是在a标签下的，所以需要阻止默认的a标签的默认行为。

研究了下，这么写可行。

jQuery(function($) {
    $(".bdzixun").on('click',function(e){e.preventDefault();});
    $(".bdzixun").click(function(event) {
        if ($(".embed-icon-default").length > 0) {
            $(".embed-icon-default").click();
        }
    });
});

结合上述的js，构建一个全局侧边浮动按钮

<!-- 右侧悬浮按钮 -->
<div class="ky-float-container">
  <div class="ky-float-buttons">
    <!-- 首页按钮 -->
    <div class="ky-float-button" 
         data-url="/" 
         data-icon="fa-home" 
         data-title="首页"
         data-card-content='<div class="ky-float-card-content"><h3>首页</h3><p>网站主页，浏览最新内容</p></div>'>
      <i class="fa fa-home"></i>
    </div>


    
    <!-- 联系我们-->
    <div class="ky-float-button" 
         data-icon="fa-phone" 
         data-title="联系我们"
         data-card-content='<div class="ky-float-card-content"><h3>联系我们</h3><p>工作时间: 9:00-18:00</p><p class="ky-phone" >电话: xxxxxxxxx</p><p>邮箱: <mail class="ky-email">zkcoi@example.com</mail></p></div>'>
      <i class="fa fa-phone"></i>
    </div>    
  
    
    <!-- 微信公众号按钮 -->
    <div class="ky-float-button" 
         data-icon="fa-weixin" 
         data-title="微信公众号"
         data-card-content='<div class="ky-float-card-content"><h3>扫码关注</h3><img src="https://picsum.photos/150/150?random=1" alt="微信公众号二维码" style="width:150px;height:150px;" /></div>'>
      <i class="fa fa-weixin"></i>
    </div>
    


    <!-- 获取支持按钮 -->
    <!-- <div class="ky-float-button" 
         data-url="/supports" 
         data-icon="fa-question-circle" 
         data-title="获取支持"
         data-card-content='<div class="ky-float-card-content"><h3>获取支持</h3><p>有任何问题请随时联系我们</p></div>'>
      <i class="fa fa-question-circle"></i>
    </div> -->


    <!-- 在线咨询按钮 -->
    <div class="ky-float-button bdzixun" 
        data-icon="fa-comments" 
        data-title="在线咨询"
        data-card-content='<div class="ky-float-card-content"><h3>在线咨询</h3><p>工作日 9:00-18:00 专业团队为您解答</p><p>点击立即开启会话</p></div>'>
      <i class="fa fa-comments"></i>
    </div>
  </div>
</div>

<script>
// 使用 jQuery 安全模式
jQuery(document).ready(function($) {
  // 悬浮按钮交互逻辑
  {
    // 检测是否为触摸设备
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    
    // 获取所有按钮
    const $buttons = $('.ky-float-button');
    
    // 初始化按钮
    $buttons.each(function() {
      const $button = $(this);
      const isBdzixun = $button.hasClass('bdzixun'); // 判断是否为咨询按钮
      
      // 设置标题
      const title = $button.attr('data-title');
      if (title) {
        $button.attr('title', title);
      }
      
      // 设置链接
      const url = $button.attr('data-url');
      if (url) {
        $button.on('click', function(e) {
          // 如果卡片是打开的，点击关闭卡片而不是跳转
          if ($button.hasClass('active') && isTouchDevice) {
            e.preventDefault();
            e.stopPropagation();
            closeAllCards();
            return;
          }
          
          window.location.href = url;
        });
      }
      
      // 设置卡片内容
      const cardContent = $button.attr('data-card-content');
      if (cardContent && !isBdzixun) { // 非咨询按钮才显示卡片
        const $card = $('<div class="ky-float-card"></div>');
        $card.html(cardContent + '<div class="ky-float-card-arrow"></div>');
        $button.append($card);
        
        // 添加邮箱复制功能
        $card.find('.ky-email').on('click', function() {
          const email = $(this).text();
          navigator.clipboard.writeText(email).then(() => {
            const originalText = $(this).text();
            $(this).text('已复制');
            setTimeout(() => {
              $(this).text(originalText);
            }, 2000);
          }).catch(err => {
            console.error('复制失败: ', err);
          });
        });
        
        // 触摸设备使用点击展开卡片（非咨询按钮）
        if (isTouchDevice) {
          $button.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // 关闭其他卡片
            closeAllCards();
            
            // 切换当前卡片状态
            $button.toggleClass('active');
            
            // 点击空白处关闭卡片
            setTimeout(() => {
              $(document).one('click', closeCardOnClickOutside);
            }, 0);
          });
        }
      }
      
      // 咨询按钮在触摸设备上的特殊处理
      if (isBdzixun) {
        $button.on('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          
          // 直接跳转到咨询链接
          const url = $button.attr('data-url');
          if (url) {
            window.location.href = url;
          } else {
            // 若未设置链接，可触发其他咨询方式
            if ($(".embed-icon-default").length > 0) {
              $(".embed-icon-default").click();
            }
          }
        });
      }
    });
    
    // 关闭所有卡片
    function closeAllCards() {
      $buttons.removeClass('active');
    }
    
    // 点击外部关闭卡片
    function closeCardOnClickOutside(e) {
      if (!$buttons.is(e.target) && $buttons.has(e.target).length === 0) {
        closeAllCards();
      }
    }
  }
});
</script>

<style>
/* 右侧悬浮按钮样式 */
.ky-float-container {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.ky-float-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ky-float-button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #165DFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.ky-float-button:hover {
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 悬浮卡片样式 */
.ky-float-card {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
}

/* 桌面端悬停显示卡片 */
.ky-float-button:hover .ky-float-card {
  opacity: 1;
  visibility: visible;
}

/* 移动端点击显示卡片 */
.ky-float-button.active .ky-float-card {
  opacity: 1;
  visibility: visible;
}

.ky-float-card-content {
  text-align: center;
}

.ky-float-card-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.ky-float-card-content p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.ky-float-card-arrow {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid white;
}

/* 邮箱和电话的文本样式 */
.ky-email, .ky-phone {
  white-space: normal; /* 允许文本换行 */
  word-break: break-all; /* 允许在任意位置换行 */
  text-align: center;
  font-size: 13px; /* 略微缩小字体 */
}

/* 在线咨询按钮特殊样式 */
.ky-float-button[data-icon^="fa-comments"],
.ky-float-button[data-icon^="fa-headset"] {
  background-color: #52C41A; /* 绿色背景，象征沟通与信任 */
}

.ky-float-button[data-icon^="fa-comments"]:hover,
.ky-float-button[data-icon^="fa-headset"]:hover {
  background-color: #389E0D; /* 深绿色悬停效果 */
}

.ky-float-button[data-icon^="fa-comments"] i,
.ky-float-button[data-icon^="fa-headset"] i {
  animation: pulse 2s infinite; /* 添加呼吸动画效果 */
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.ky-email {
  text-decoration: underline;
  color: #165DFF;
  cursor: pointer;
}

/* 卡片内容最大宽度，确保长文本不会溢出卡片 */
.ky-float-card-content {
  max-width: 180px; /* 略小于卡片宽度 */
  margin: 0 auto;
}
/* 图标颜色和大小优化 */
.ky-float-button i {
  font-size: 18px; /* 增大图标尺寸 */
  transition: transform 0.3s ease; /* 添加图标动画 */
}

.ky-float-button:hover i {
  transform: scale(1.1); /* 悬停时图标放大 */
}

/* 支持类图标特殊样式（可选） */
.ky-float-button[data-icon^="fa-question"],
.ky-float-button[data-icon^="fa-life"],
.ky-float-button[data-icon^="fa-hand"] {
  background-color: #36CFC9; /* 支持类按钮使用蓝绿色背景 */
}

.ky-float-button[data-icon^="fa-question"]:hover,
.ky-float-button[data-icon^="fa-life"]:hover,
.ky-float-button[data-icon^="fa-hand"]:hover {
  background-color: #25B8B3; /* 悬停时加深颜色 */
}
/* 移动设备适配 */
@media (max-width: 768px) {
  .ky-float-container {
    right: 10px;
  }
  
  .ky-float-button {
    width: 40px;
    height: 40px;
  }
  
  .ky-float-card {
    width: 180px;
    padding: 10px;
  }
  
  .ky-float-card-content h3 {
    font-size: 14px;
  }
  
  .ky-float-card-content p {
    font-size: 12px;
  }

  .ky-email, .ky-phone {
    font-size: 11px;
  }
}




</style>