Get an UIKIT Alert to diappear after a few seconds.

[NorbertH]

Hi there

I am using an UIKIT alert box in a frontend template:

<div class="uk-alert-success uk-text-center" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <h3><?=$Success.$SuccessText?></h3>
</div>

It already has a close button , but i want it to disappear after some seconds even if you don't close it manually.

UIKIT docs seem to say its possible , but i cannot find an example on how its done. 

Thanks in advance !

 

 

 

 

[dragan]

use setTimeout? https://github.com/uikit/uikit/issues/463#issuecomment-47188534

[NorbertH]

 

UIKIT3 Docs:

https://getuikit.com/docs/alert#component-options

Seems to say that you can animate this using component options , but i really can't  find out how.  

Trying to avoit to add to much custom scripts for just an alert. 

 

[dragan]

add the classes uk-animation-fade uk-animation-reverse

[NorbertH]

Cool that does it , but how i set animation time ?

[NorbertH]

Another issue is that the element is only faded , so if you have several warnings , they stull use up their space after they have faded. 

If you close em they are removed. 

[dragan]

I'm not a UIKit expert by any means. In fact, you should have posted this question in the "dev talk" thread. This doesn't have anything to do with ProcessWire per se.

I guess you have the most control if you trigger the alert via JS, and setTimeout(). I don't know if you can fine-tune the animation duration. Maybe someone else who uses this framework regularly knows more.

[NorbertH]

Ok, if "dev talk " is the better place, some moderator hopefully moves this.

Anyway thanks a lot !

 

[bernhard]

setTimeout(function() {
  UIkit.alert('#youralertid').close();
}, 1000);

 

[Zeka]

@NorbertH

I'm not using UIkit but as I understand from components list, they have "Notification" component which intended to close automatically. Or you can use JS example from @bernhard

[NorbertH]

Thanks to all , using notifications for now ?