Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Timed pop-up using Zurb Foundation Reveal (modal); stores whether the user has dismissed it or already subscribed in local storage. This example is built in WordPress using ACF to get values of what to store, when to show up etc (and Ninja Forms for the form but of course it doesn't have to be used for a form).
/**
* Convert milliseconds to the desired format
* @param milliseconds
* @param format
* @returns {*}
* @see https://gist.github.com/flangofas/714f401b63a1c3d84aaa
*/
function convertMilliseconds(milliseconds, format) {
var total_days, total_hours, total_minutes, total_seconds;
total_seconds = parseInt(Math.floor(milliseconds / 1000));
total_minutes = parseInt(Math.floor(total_seconds / 60));
total_hours = parseInt(Math.floor(total_minutes / 60));
total_days = parseInt(Math.floor(total_hours / 24));
switch(format) {
case 'seconds':
return total_seconds;
break;
case 'minutes':
return total_minutes;
break;
case 'hours':
return total_hours;
break;
case 'days':
return total_days;
break;
default:
console.log('No format parameter given to convertMilliseconds()');
return;
break;
}
}
window.addEventListener('load', function() {
initPopUpSubscription();
/**
* Popup subscription form
*/
function initPopUpSubscription() {
// Get elements
var popup = document.getElementById('subscribe-modal');
var delay = popup.dataset.delay * 1000; // seconds to milliseconds
var frequency = popup.dataset.frequency;
var form_id = popup.dataset.form_id;
// Check if the user has already subscribed according to their local storage
var alreadySubscribed = localStorage.getItem('subscribed');
// If a dismissed_date is stored in local storage, check how long ago it was
var alreadyDismissed = localStorage.getItem('dismissed_date');
var howLongSinceDismissed = 100;
if (alreadyDismissed != null) {
var today = new Date().getTime();
var dismissed = parseInt(alreadyDismissed);
var todayInDays = convertMilliseconds(today, 'days');
var dismissedDays = convertMilliseconds(dismissed, 'days');
howLongSinceDismissed = todayInDays - dismissedDays;
}
// So should we show the popup?
var show_popup = false;
if ((alreadySubscribed != null) || (howLongSinceDismissed > frequency)) {
show_popup = true;
}
// Show it if true
if (show_popup) {
// Show the popup after the delay time
if (popup != null) {
setTimeout(function () {
$('#subscribe-modal').foundation('open');
}, delay);
}
// When the popup has appeared...
$('#subscribe-modal').on('open.zf.reveal', function () {
// When the form is submitted
$(document).on('nfFormSubmitResponse', function (event, response, id) {
// Make sure we're responding to the right form, using the form ID
if(response.id == form_id) {
// Save subscribed state to local storage
localStorage.setItem('subscribed', 'true');
// Close the window after a couple of seconds
setTimeout(function () {
$('#subscribe-modal').foundation('close');
}, 2000);
}
});
// When the popup is dismissed
var closebutton = document.getElementById('dismiss-subscribe-popup');
if (closebutton != null) {
closebutton.addEventListener('click', function () {
event.preventDefault();
// Save timestamp in local storage if the user has not subscribed
// Note: We shouldn't actually get to this, because the modal should close after a successful subscription,
// but I'm putting it here just in case, to ensure we don't get both values stored unnecessarily
if (alreadySubscribed == null) {
var today = new Date().getTime();
localStorage.setItem('dismissed_date', today.toString());
}
// Close modal
$('#subscribe-modal').foundation('close');
});
}
});
}
} // end subscription popup
});
<?php
$popup = get_field('popup', 'option');
$headline = $popup['headline'];
$message = $popup['message'];
$form = $popup['form_shortcode'];
$form_id = str_replace('[ninja_form id=', '', $form);
$form_id = str_replace(']', '', $form_id);
$loading_delay = $popup['loading_delay'];
$frequency = $popup['frequency'];
// Note: data-delay, data-frequency, and data-form_id are not part of the Foundation Reveal spec.
// See theme.js for their usage.
?>
<div class="reveal" id="subscribe-modal"
data-reveal
data-close-on-click="false"
data-delay="<?php echo $loading_delay; ?>"
data-frequency="<?php echo $frequency; ?>"
data-form_id="<?php echo $form_id; ?>">
<button id="dismiss-subscribe-popup" class="close-button" aria-label="Close modal" type="button">
<span aria-hidden="true">&times;</span>
</button>
<h2><?php echo $headline; ?></h2>
<?php if($message) {
echo wpautop($message);
} ?>
<?php echo do_shortcode($form); ?>
</div>
@MvanVijfeijken
Copy link

MvanVijfeijken commented Mar 17, 2020

Hi, thank so much, trying out your script but I get an error on function "convertMilliseconds", is not defined, and I dont see it indeed being declared, could that be the case? How to solve this? Tnx!! Maurits

@doubleedesign
Copy link
Author

doubleedesign commented Mar 17, 2020

Hey Maurits, thanks for letting me know that was missing! I've just added another file above with the function you need. :)

@MvanVijfeijken
Copy link

MvanVijfeijken commented Mar 17, 2020

Gr8, tnx!

@MvanVijfeijken
Copy link

MvanVijfeijken commented Mar 22, 2020

Hi again,

Thanks for previous support, works great, only one more thing I'm hoping you can help me with: after this timeOut function has been excuted, I's like to use Foundation6 's data-animation option, but whatever I try, I cant get it to work afterwards (so after firing the reveal modal to open). Is there away to keep using data-options,or should I look for a css solution ? I'd rather stick to the preset F6 animation workflow but not sure if thats possible, any suggestions? Much appreciated again!

@doubleedesign
Copy link
Author

doubleedesign commented Mar 25, 2020

Unfortunately I haven't used the F6 animations with this so I can't answer that, sorry!

@MvanVijfeijken
Copy link

MvanVijfeijken commented Mar 25, 2020

@BadScooter1980
Copy link

BadScooter1980 commented Apr 21, 2021

Thanks for this, but I seem to be having an issue where it loads in right away.

I have edited the following line;

var delay = popup.dataset.delay * 1000; // seconds to milliseconds

However, no matter what I set here it still loads in right away.

What am I missing?

@doubleedesign
Copy link
Author

doubleedesign commented Apr 22, 2021

@BadScooter1980 what is popup.dataset.delay set to in your code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment