Script: reveal modal based on a specific time weekly ⏰

Design help Custom code
1

Hello all!

Looking for a solution that will hide/show a modal alert based on certain times of the week. The purpose is to alert visitors twice a week (CST) that there is a live stream happening and give them quick access to the appropriate links. It only needs to appear on the homepage and no where else.

I’ve looked around :webflow_heart: forum and others but haven’t found a solution that works. Surely there’s got to be a way for a simply script to look at the visitor’s IP or device time and then reveal the wrapping div if it’s within a certain timeframe.

Any assistance would be greatly appreciated. Maybe you could work this into a workshop, @PixelGeek. :wink:

2

Link to published page with the link?

3

Don’t have a project yet for this, but your spurring made me think. :thinking:
:man_shrugging: Why not create a project for everyone to play around with?

Feel free to duplicate or mess with it in read-ony mode.

http://time-based-reveal.webflow.io

14
143840×2278 902 KB

So the challenge is to use a script make each alert only show up on its day of the week. For instance today is wednesday so the script would reveal the alert div for today .alert.wednesday. It would then look like this.

49
493840×2278 647 KB

:+1: Any help is greatly appreciated and I’ll keep this project around for others to learn from when we’re done.:white_check_mark:

3 Likes
4

Assuming Sunday is first (according to your demo site),

paste this in Page Settings > FOOTER code:

<script>$('.alert').hide().eq(new Date().getDay()).show();</script>

You can remove .hide() from the code if you set .alert to display none.

Also, feel free to contact me for further code help and/or customization of third-party plugins

3 Likes
5

Love this!

I use Zotabox for my pop ups but it’s beginning to really annoy me.

I need to implement more custom code for things like this.

6

Bam! That worked well and such a simple line of code.

Next level is I need the alert to only appear during certain hours of a certain day and not all day. Is that possible?

7

I was looking for this solution for my current project, as it would be good to show an emergency contact number for out of hours. It’s been discussed somewhere on the forum around 2014-15 but I couldn’t find it again.

1 Like
8

Yes, that is another perfect example of how this script is very practical.

9

Hey @samliew would you mind explaining why you said this and how it relates to the code? I noticed today when implementing onto my client site that it’s necessary to have a class for each day of the week in sequential order for the code to work. Why is this?

10

Because new Date().getDay() returns 0-6 based on day of the week, starting from Sunday.

No you are mistaken, the day of the week class names are not necessary.

11

For those interested, I’ve updated the clone template to work with day, month, and date. You can use them individually or in combination like the example.

https://webflow.com/website/time-based-reveal

2 Likes