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

/**
 * 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;
	}
}

modal-handler.js

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

});

modal-html.php

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

Ok tnx anyways, all the best ! Met vriendelijke groet/Kind regards, Maurits van Vijfeijken

…

Op 25 mrt. 2020 om 14:04 heeft Leesa Ward ***@***.***> het volgende geschreven: ***@***.*** commented on this gist. Unfortunately I haven't used the F6 animations with this so I can't answer that, sorry! — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

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?

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