Menu
I hope you can help me with my problem, because it seems quite odd to me. On my website I'm using some Bootstrap alerts to inform the users in case of success or errors.
After some time the alert is hidden:
setTimeout(function() {
$("#alertLogged").removeClass("show");
}, 5000);
My problem is that, because of the alert being hidden, all buttons that are behind the alert are still not clickable.
I'll try to make a jsfiddle but I can't promise that it works because I've had some problems in the past. Furthermore I#ve already tried to make the alert on bottom, which solved my problem of the buttons on top being not clickable. But I think it looks better if the alerts are at the top of the website.
Beside that I've tried to destroy the alerty completely and not only hide it which solved the problem as well.
But this is no real solution because it will make more problems if I have to display another error/success message.
There is not much code to show here but as I said I'll try to give you a jsfiddle.
Hope some of you can help me, thanks in advance :)
Here's the HTML code of the "alertLogged" item. It is not much because I'm doing most of it in Java Script
<div class="hide fade text-center" role="alert" id="alertLogged"></div>
After joshmoto's answer I've tried to add something to my CSS file:
.alert:not(.show){
pointer-events: none;}
but it did not change anything...
In order to get Shidersz answer going (it looks quite nice and simple) I will post the code now:
alert("TEST");
$("#alertLogged").fadeIn(1000).delay(5000).fadeOut(1000);
alert("TEST2");
So the alert("TEST") is called but "TEST2" is not, furthermore, the alert does not show up.
454
Closing Alerts To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
Use the . alert-link utility class to quickly provide matching colored links within any alert. This is a primary alert with an example link.
Bootstrap 4 provides an easy way to create predefined alert messages. Alerts are created with the . alert class, followed by one of the eight contextual classes .
Its not full proof but you could maybe create your own class or add some css to position the alert somewhere else while it is hidden.
You could use pointer-events: none; css when the alert is not visible and extend your .show class to include pointer-events: auto;
That might be a quick fix if I'm understanding your question right.
Update
On the bootstrap alerts page if I remove the show class from the dom, the alert becomes invisible but it still acts as block element. Is your absolute positioned? Strange, I would of thought you could click through the hidden alert with pointer-events: none;
Try this css maybe..
.alert-dismissible {
pointer-events: none;
}
.alert-dismissible.show {
pointer-events: auto;
}
Update 2
Because you want to keep the alert in the dom at all times. Maybe just only use the .alert class and not use the .alert-dismissible classes.
When you are removing .show class, this will only change the opacity to 0. This is so the bootstrap dismissible animation can fade the alert out before destroying it.
Try loading your html with this class .alert-hidden.
.alert-hidden {
display: none;
}
Then toggle this class as you need to with your script.
setTimeout(function() {
$("#alertLogged").addClass("alert-hidden");
}, 5000);
Why not simple use initilization of alert with display:none and then show and hide it using the JQuery methods 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
