求助：jQuery悬浮模态弹窗无法正常实现

问题诊断 #

你的代码存在几个关键问题导致模态弹窗无法正常工作：

• 未引入jQuery、Bootstrap/MDB的核心CSS和JS文件，模态组件依赖这些资源才能完成渲染和交互
• 仅处理了hover的鼠标进入事件，未实现鼠标离开时关闭弹窗的逻辑
• 直接调用modal({show: true})的初始化方式，在hover场景下容易触发重复初始化，引发交互异常

修复步骤 #

1. 引入必要依赖
   确保页面头部加载jQuery、Bootstrap（或MDB）的CSS和JS文件（建议使用稳定兼容版本）
2. 完善hover事件逻辑
   使用hover()的双参数形式，分别处理鼠标进入（显示弹窗）和鼠标离开（隐藏弹窗）的行为
3. 优化模态调用方式
   使用modal('show')和modal('hide')方法控制弹窗的显示/隐藏，避免重复初始化

完整代码示例 #

HTML

<!-- 引入依赖资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<button class="test">jQuery Hover Modal Popup</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content p-3">
      jQuery悬浮触发的模态弹窗内容
    </div>
  </div>
</div>

JS

$(document).ready(function(){
    // hover事件分两个回调：mouseenter和mouseleave
    $(".test").hover(
        function() {
            // 鼠标进入时显示模态框
            $('.modal').modal('show');
        },
        function() {
            // 鼠标离开时隐藏模态框
            $('.modal').modal('hide');
        }
    );

    // 可选优化：鼠标移到弹窗上时保持弹窗显示
    $('.modal').on('mouseenter', function(){
        $(this).data('hovered', true);
    }).on('mouseleave', function(){
        $(this).data('hovered', false);
        $('.test').trigger('mouseleave');
    });

    $('.test').on('mouseleave', function(){
        setTimeout(function(){
            if(!$('.modal').data('hovered')){
                $('.modal').modal('hide');
            }
        }, 100);
    });
});

额外说明 #

• 如果使用MDBootstrap，替换Bootstrap的CSS和JS为MDB的对应资源即可
• 可选的弹窗悬停逻辑是为了避免鼠标从按钮移到弹窗时弹窗意外关闭，提升用户体验

内容的提问来源于stack exchange，提问作者Vivek Vivi