Question

我希望您能为我解决问题，因为这对我来说似乎很奇怪。在我的网站上，我使用一些Bootstrap alerts来通知用户成功或错误的情况。

一段时间后，警报被隐藏：

setTimeout(function() {
    $("#alertLogged").removeClass("show");
}, 5000);

我的问题是，由于隐藏了警报，警报后面的所有按钮仍然无法单击。

我将尝试制作一个jsfiddle，但是我不能保证它会起作用，因为过去我遇到了一些问题。此外，我已经尝试在底部发出警报，这解决了我的顶部按钮不可点击的问题。但是我认为，如果警报位于网站顶部会更好。

此外，我试图彻底摧毁警报器，不仅隐藏它，而且也解决了问题。

但这不是真正的解决方案，因为如果我必须显示其他错误/成功消息，它将带来更多问题。

这里没有太多代码要显示，但是正如我所说，我会尽力给你一个jsfiddle。

希望大家能帮助我，在此先感谢:)

更新

这是“ alertLogged”项目的HTML代码。数量不多，是因为我用Java脚本完成了大部分工作

<div class="hide fade text-center" role="alert" id="alertLogged"></div>

更新2

在joshmoto回答之后，我尝试将某些内容添加到我的CSS文件中：

.alert:not(.show){
pointer-events: none;}

但它并没有改变任何东西...

更新3

为了让Shidersz回答顺利（看起来非常简单），我现在将代码发布：

alert("TEST");
$("#alertLogged").fadeIn(1000).delay(5000).fadeOut(1000);
alert("TEST2");

因此调用了alert（“ TEST”），但没有调用“ TEST2”，

Answer 1

这还不是完全的证据，但是您可以创建自己的类，也可以添加一些CSS以将警报隐藏时将其放置在其他位置。

当警报不可见时，您可以使用pointer-events: none; CSS，并扩展您的.show类以包含pointer-events: auto;

如果我对您的问题理解正确，那可能是一个快速解决方案。

更新

在bootstrap alerts page上，如果我从dom中删除了show类，警报将变得不可见，但它仍会充当阻止元素。你的绝对定位吗？奇怪，我想您可以使用pointer-events: none;

单击隐藏的警报

也许试试这个CSS。

.alert-dismissible {
  pointer-events: none; 
}

.alert-dismissible.show {
  pointer-events: auto; 
}

更新2

因为您想始终将警报保留在dom中。也许只使用.alert类，而不使用.alert-dismissible类。

当您删除.show类时，这只会将不透明度更改为0。这是可禁用的引导动画，可以在销毁警报之前淡出警报。

尝试使用此类.alert-hidden加载html。

.alert-hidden {
  display: none;
}

然后根据需要在脚本中切换此类。

setTimeout(function() {
    $("#alertLogged").addClass("alert-hidden");
}, 5000);

Answer 2

为什么不简单地使用display:none来启动警报，然后使用JQuery方法fadeIn()/fadeOut()来显示和隐藏它。

<html>
<head>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

</head>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  <div class="alert alert-info text-center" role="alert" id="alertLogged">
    Alert!
  </div>
  <button class="btn btn-primary" id="btnAlert">
    Show Alert
  </button>

  <style>
    #alertLogged {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: none;
    }
  </style>

  <script>
    $("#btnAlert").click(function()
    {
      $("#alertLogged").fadeIn(1000).delay(5000).fadeOut(1000);
    });
  </script>

</body>
</html>

隐藏的Bootstrap通知阻止按钮

更新

更新2

更新3

2 个答案: