Как отобразить и закрыть модальное сообщение при наведении на кнопки - PullRequest
0 голосов
/ 23 марта 2019

Я хотел бы отобразить текстовое окно описания, когда наведите курсор на кнопку, и закройте его, когда оно не находится. В тот момент, когда моя кнопка наведена, отображается текстовое поле, однако мне нужно щелкнуть по экрану, чтобы закрыть его. Когда я пытаюсь использовать несколько кнопок для отображения разных окон сообщений, открываются все модалы, и мне нужно много раз щелкнуть экран, чтобы закрыть его. Как я могу показать окно сообщения при наведении курсора и не показывать, когда мышь не наведена. Как этого добиться для нескольких кнопок?

Вот то, что у меня есть:

$(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>

Ответы [ 3 ]

1 голос
/ 23 марта 2019

Первая серьезная проблема: когда bootstrap отображает этот модал, он перезаписывает все на веб-странице, включая кнопку «Тест», что делает его недоступным для mouseOut (нижняя часть модального диалога находится над кнопкой)

Это решается путем назначения ставок на порядок отображаемых слоев путем размещения большего z-индекса css (я поставил 8000, и это также работает, только если элемент использует позиционирование) В результате это больше не является истинным модальным диалогом, и можно нажать кнопку «Тест», что противоречит духу использования модального диалога.

Документ 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>
0 голосов
/ 23 марта 2019

Вы можете достичь этого с помощью CSS, установив атрибут данных с «парящим текстом» в HTML для каждой кнопки. Если слишком много кнопок, чтобы сделать это вручную, или если они динамически меняются, вы можете зациклить их в JS и использовать .setAttribute("data-tip", "tip_content").

Вот пример HMTL и CSS:

<button data-tip="Show this on hover">My botton</button>
button:hover:after {
    content: attr(data-tip);
    color: red;   
    display: block;
    position: absolute;
    top: 20%;
}

Вот ссылка на кодовый блок, если вы хотите увидеть ее вживую: https://codepen.io/CPC464/pen/KEbJJo

0 голосов
/ 23 марта 2019

Новый ответ:

"hover" метод принимает второй аргумент в качестве handlerOut.

Таким образом, вы можете сделать что-то вроде этого:

$(document).ready(function () {
    "use strict";
    $("#test1").hover(
        function () {
            $('.modal').modal({
                show: true
            });
        },
        function () {
            $('.modal').modal('hide');
        });
});

Старый ответ:

Поскольку вы используете загрузчик, для таких случаев вы можете использовать popover.

https://getbootstrap.com/docs/3.3/javascript/#popovers-examples

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...