Hidden Bootstrap notification blocks buttons

Question

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 :)

UPDATE

Here's the HTML code of the "alertLogged" item. It is not much because I'm doing most of it in Java Script

UPDATE 2

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...

UPDATE 3

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.

user_888894 · Answer

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);

user_10366495 · Answer

Why not simple use initilization of alert with display:none and then show and hide it using the JQuery methods fadeIn()/fadeOut().

Hidden Bootstrap notification blocks buttons

UPDATE

UPDATE 2

UPDATE 3

2 Answers