Question

我的通知显示在屏幕的左上角。它们延迟了5秒钟，然后被移除。如果用户悬停在一个用户上，则应将其删除。

这是我的jquery代码

$alert.on('mouseover', function() {
    clearTimeout(growl_remove);
});
growl_remove = setTimeout(function() {
    return $alert.alert("close");
}, 5000);

这是HTML

<div class="growl col-xs-12 col-sm-12 col-md-3 alert alert-danger" style="position: fixed; margin: 0px; z-index: 9999; top: 26.846393585205078px; right: 20px;">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;Invalid Username or Passowrd
</div>

现在这看起来确实有效，但它会阻止最后一次警报被移除，而不是用鼠标悬停它。

这是一个jsFiddle：http://jsfiddle.net/KU5gy/

Answer 1

有帮助吗？

var AlertController = function(){
  var _timeoutId = null;
  var _resetTimeout = function() {
    clearTimeour(_timeoutId);
    _timeoutId = setTimeout(function() { $alert.alert("close"); }, 5000);
  }
  var _init(){
      $alert.on('mouseover', resetTimeout);
  }
  return {
      showNotification: function(){
        $alert.alert("show");
        _init();
      }
  }
}

并将其称为：

//call it when your notification is to be shown
function onNotification(){
  new AlertController().showNotification();
}

Answer 2

这似乎解决了我的问题

var bootstrap_growl_remove = [];

$alert.on('mouseover', function() {
  clearTimeout(bootstrap_growl_remove[$alert.index()]);
}).on('mouseleave', function() {
  bootstrap_growl_remove[$alert.index()] = setTimeout(function() {
    return $alert.alert("close");
  }, options.delay);
});

bootstrap_growl_remove[$alert.index()] = setTimeout(function() {
  return $alert.alert("close");
}, options.delay);

如果鼠标悬停，则阻止删除元素

2 个答案: