Automatically load popup layer for set amount of time

[Frodo]

Good day ladies, gentlemen and all custodians of this amazing forum!

Today, I find myself in need of some advice.
I am looking for a way to have a popup layer load on page load, but then I want it to automatically close after a set amount of time, say 8 seconds. The automatically load on page load, I got down already, it's the rest of the process that I want to know:

1. Can it be done?
2. How?

I know that most of you are going to reorganise my priority list to start with "WHY?", so I will furnish you with that answer, before it even gets asked.
A: F*** knows why my client wants this.

Thank you so much guys for having this amazing forum full of amazing people. Looking forward to your answers.

[gwpriester]

I am sure there is a script for this and I think this request has come up before. Acorn can probably help out here.

[Acorn]

I am looking for a way to have a popup layer load on page load, but then I want it to automatically close after a set amount of time, say 8 seconds. The automatically load on page load, I got down already, it's the rest of the process that I want to know:
1. Can it be done?
2. How?

Frodo, yes it can.
How depends on what you have used to display the pop-up on load. can you advise or provide a sample?

Basically, it would be a Windows timer that firs up the Close button action.

Acorn

[Initiostar]

You could use an approach that has the 'popup' fade in on-load and fade-out after a time interval : https://initiostar.co.uk/demo/JSPop/

I can think of many examples where this approach is quite useful for short-timespan visitor messages (e.g. in a restaurant where you might want to say new menu tonight).

It does require a few lines of code, but maybe worth a thought.

Gary

[Acorn]

@gary - the javascript: in your code is not needed; you are between script tags.

My approach is just CSS - no jQuery so a quicker and smaller payload.
All elements on the page/layer that need to fade away are Named: htmlclass="popupAndFade"

I add my CSS to the Website Code (head):

<style>
.popupAndFade {
animation: fadeAnimation ease 10s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}


@keyframes fadeAnimation {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

Acorn

[gwpriester]

Brilliant.

[Initiostar]

@Acorn - great solution; stored away for future use.

Gary

[Boy]

Nice one, Acorn. Thanks!

[wizard509]

Thank you Acorn.

[Frodo]

Hey guys,

I just popped on quick and I see there are some brilliant responses here. Thank you so much, as soon as I have a gap later today I will go through and try these out.

To answer your question Acorn, it's the method that GWPriester layed out before I think. I'll double check and let you know.

Thanks so much guys, you are the best!