javascript - 隐藏的 Bootstrap 通知 block 按钮

Question

我希望你能帮我解决我的问题，因为我觉得这很奇怪。 在我的网站上，我使用了一些 Bootstrap alerts在成功或错误的情况下通知用户。

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

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

我的问题是，由于警报被隐藏，警报后面的所有按钮仍然不可点击。

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

除此之外，我还试图完全破坏警报，而不仅仅是隐藏它，这也解决了问题。

但这不是真正的解决方案，因为如果我必须显示另一个错误/成功消息，它会产生更多问题。

这里没有太多代码可以显示，但正如我所说，我会尝试为您提供一个 jsfiddle。

希望你们中的一些人能帮助我，在此先感谢:)

更新

这是“alertLogged”项目的 HTML 代码。这并不多，因为我大部分都是用 Java Script 做的

<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"，此外，alert 没有显示。

Answer 1

它不是完整的证据，但您可以创建自己的类或添加一些 css 以在隐藏时将警报定位在其他地方。

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

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

---

更新

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

点击隐藏的警报

也许试试这个 css..

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

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

---

更新 2

因为你想时刻保持dom中的alert。也许只使用 .alert 类而不使用 .alert-dismissible 类。

当您删除 .show 类时，这只会将不透明度更改为 0。这样 Bootstrap 可关闭动画可以在销毁它之前淡出警报。

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

.alert-hidden {
  display: none;
}

然后根据需要使用脚本切换此类。

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