我正在尝试制作 Jquery 模态弹出对话框。 请帮我

Question

我正在尝试为我的新项目制作 Jquery hover 模态弹出窗口 window。 （不是工具提示。）不幸的是，它不起作用。 请帮帮我..请检查这个codepen链接https://codepen.io/coderco/pen/MWGgqop 。 我正在寻找与 Jquery https://mdbootstrap.com/snippets/jquery/bartek-malanowski/226737相同的工作。这是我的代码。 请帮我..

$(document).ready(function(){
    $( ".test" ).hover(function() { //Hover Function
           $('.modal').modal({ // Modal
        show: true
    });
  });  
});

HTML

<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">
Jquery Hover Modal Popup
    </div>
  </div>
</div>

Answer 1

Here in html firstly I removed the extra script tag I added a new attribute hidden="true" to hide the model and in jquery used built in function.

当有人悬停时，弹出窗口将被隐藏。

 $(".test").hover(function() { $('.modal').show(); }, function() { $('.modal').hide(); });

 .modal { margin:0.5em 0; padding: 0.5em; border:1px solid rebeccapurple; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.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" hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> Jquery Hover Modal Popup </div> </div> </div>