时间戳

首页 > 解决方案 > 悬停在按钮上时如何显示和关闭消息模式

javascript - 悬停在按钮上时如何显示和关闭消息模式

问题描述

我想在将鼠标悬停在按钮上时显示一个文本描述框，并在未悬停时将其关闭。目前，当我的按钮悬停时，会显示文本框，但是我需要单击屏幕以将其关闭。当我尝试使用几个按钮来显示不同的消息框时，所有的模式都打开了，我需要多次单击屏幕才能关闭它。如何在鼠标悬停时显示消息框并在鼠标未悬停时不显示。如何实现多个按钮？

以下是我到目前为止的内容：

$(document).ready(function () {
    "use strict";
    $("#test1").hover(
        function () {
            $('.modal').modal({
                show: true
            });
        },
        function () {
            $('.modal').modal('hide');
        });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</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">
      This text box shown when mouse hover over the button
    </div>
  </div>
</div>

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

第一个主要问题：当 bootstrap 显示这个模态时，它会覆盖网页上的所有内容，包括 Test 按钮，这使得它超出了 mouseOut 的范围（模态对话框的底部在 button 上方）

这可以通过放置更大的 z-index css（我放了 8000，这也仅在元素使用定位时才有效）来对显示层的顺序进行投标来解决。因此，这不再是真正的模态对话框，并且可以触发点击Test按钮，这与使用模态对话框的精神背道而驰。

关于该主题的 BS4 文档 => https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes

$(document).ready(function () {
  "use strict";
  
  $(".BtModals").hover(
    function () {
      let refID = '#' + $(this).data('modal_id');
      $(refID).modal('show');
    },
    function () {
      let refID = '#' + $(this).data('modal_id');
      $(refID).modal('hide');
    });
});
.BtModals:hover {
  position:relative;
  z-index: 8000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

 <button class="btn login btn-primary BtModals" data-modal_id="Modal-t1"  data-toggle="modal" data-target="#product1" >Test 1</button>

  <button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>


  <div id="Modal-t1" 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">
      This text box shown when mouse hover over the button  Test 1
    </div>
  </div>
</div>

<div id="Modal-t2" 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">
      This text box shown when mouse hover over the button  Test 2
    </div>
  </div>
</div>

推荐阅读