Как скрыть всплывающее окно Bootstrap 3 при отображении другого всплывающего окна? - PullRequest
Новая
       17

Как скрыть всплывающее окно Bootstrap 3 при отображении другого всплывающего окна?

0 голосов
/ 12 сентября 2018

Я использую всплывающую подсказку при наведении ярлыка, но это не может работать на мобильных устройствах, поэтому я решил использовать всплывающее окно при нажатии (сенсорный запуск для мобильных устройств) вместо всплывающих подсказок на рабочем столе.Этот трюк я нашел здесь: https://codepen.io/sharperwebdev/pen/mJYRNN

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

Я также пытаюсь скрыть все другие всплывающие окна, когда отображается новая, но она не работает.
функция .popover('hide') не работает для меня.Поэтому я забыл это.

Вот мой код: 

$( function () {
  var toolBox = $('[data-toggle="tooltip"]'); 
  toolBox.popover({
    template: '<div class="popover ps-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'              
  }).on('click touchstart', function(e) {
  setTimeout(function() {
   $('[data-toggle="tooltip"]').popover('hide');  $('.ps-popover').fadeOut('slow');     //hide popover after 1s
  }, 1000);
  });
})

Вы можете проверить здесь результаты: https://codepen.io/cutis/pen/qMYrOq

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Самый простой способ добиться этого с помощью data-trigger="focus" и добавить click событие с setTimeout https://getbootstrap.com/docs/3.3/javascript/#popovers

$(function () {
  var timeout;
  $('[data-toggle="popover"]').popover().click(function () {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        $('[data-toggle="popover"]').popover('hide');
    }, 1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>
0 голосов
/ 12 сентября 2018

Если вы хотите скрыть и показать поповер вручную, установите «trigger: manual» в вашей конфигурации поповера.

Кроме того, нет никаких причин для отдельного затухания всплывающего окна, так как правильный вызов hide () должен делать это сам.

Вот рабочий пример: https://codepen.io/anon/pen/XPqgQr?editors=1011.

$( function () {

  var allTextsWithTooltip = $('[data-toggle="tooltip"]'); 

  allTextsWithTooltip.popover({
    template: '<div class="popover ps-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    trigger: "manual"
  }).on('click touchstart', function(e) {
    $(this).popover('show');

    setTimeout(() => {
      $(this).popover('hide'); 
    }, 1000);
  });  
})
...