tik*_*302 6 html javascript twitter-bootstrap
我希望你能帮助我解决我的问题,因为这对我来说似乎很奇怪.在我的网站上,我正在使用一些Bootstrap警报,以便在成功或错误时通知用户.
一段时间后隐藏警报:
setTimeout(function() {
$("#alertLogged").removeClass("show");
}, 5000);
我的问题是,由于隐藏了警报,警报后面的所有按钮仍然无法点击.
我会尝试制作一个jsfiddle,但我不能保证它有效,因为我在过去遇到了一些问题.此外,我已经尝试在底部发出警报,这解决了我的顶部按钮无法点击的问题.但是,如果警报位于网站的顶部,我认为看起来会更好.
除此之外,我试图彻底摧毁它,不仅隐藏了解决问题的方法.
但这不是真正的解决方案,因为如果我必须显示另一个错误/成功消息,它会产生更多问题.
这里没有太多代码可以显示,但正如我所说,我会试着给你一个jsfiddle.
希望你们中的一些人可以帮助我,在此先感谢:)
这是"alertLogged"项的HTML代码.它并不多,因为我在Java Script中做了大部分工作
<div class="hide fade text-center" role="alert" id="alertLogged"></div>
在joshmoto的回答后,我试图在我的CSS文件中添加一些内容:
.alert:not(.show){
pointer-events: none;}
但它没有改变任何东西......
为了让Shidersz回答(它看起来非常简单)我现在将发布代码:
alert("TEST");
$("#alertLogged").fadeIn(1000).delay(5000).fadeOut(1000);
alert("TEST2");
因此,警报("TEST")被调用但"TEST2"不会被警告,此外,警报不会显示.
为什么不简单地使用警报初始化，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>