Question

当鼠标移至div上方时，我正在打开一个引导模式，当鼠标移离div时，如何关闭该模式？

$(document).ready(function() {
  $("#b1").hover(function() {
    $('#modal1').modal({
      show: true,
      backdrop: false
    });
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h2 class="page-header" data-toggle="modal" data-target="#modal1" id="b1">Move Mouse Here</h2>

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-left">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
        <h4 class="modal-title" id="modal1Label">Left Modal title</h4>

      </div>
      <div class="modal-body">Some Demo For Modal 1</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以将第二个参数传递给悬停，这也是一个将隐藏弹出窗口的叠加层的功能

  $("#id").hover(function () {
        $('.test-modal-lg').modal({
            show: true,
            backdrop: false
        }); 
    }, function () {
       $('.test-modal-lg').modal('hide');
    });

悬停时如何关闭引导程序模态

1 个答案: