iziModal icon indicating copy to clipboard operation
iziModal copied to clipboard

[Feature] Pop Up on exit and Cookie

Open ranggasan opened this issue 7 years ago • 2 comments

It would be nice if there are options in IziModal to display a modal before a user leaves website and also cookie so that IziModal only pop up once per session.

ranggasan avatar Dec 12 '17 09:12 ranggasan

+1

lstephensca avatar Apr 24 '18 16:04 lstephensca

I have combined it with Cookie.js to get what you are looking after. Hopefully this will help someone.

<!-- Cookies.js -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

<!-- Popup -->
<div class="popup" class="section_plain"  style="display: none;" id="popup_age">
	<h4>In order to protect minors, please confirm you are over 18 years old.</h4>
	<div class="center"><button class="button" id="age_close">Yes - Over 18</button> <button id="no_action" class="button">No - Under 18</button></div>
</div>

<script>
//set up modal instance
$("#popup_age").iziModal({
	title: 'Confirm you age',
	headerColor: '#9827AE',
	closeButton: false,
	autoOpen: 0,
	padding: 15,
	borderBottom: false,
	zindex: 999999,
	overlayClose: false,
});

// auto open popup after 5 second if cookie not set
if (Cookies.get('popup_age') != 1) {
	setTimeout(function(){
		$('#popup_age').iziModal('open');
	}, 5000);
}

//manual close button action
$(document).on('click', '#age_close', function (event) {
    event.preventDefault();
    $('#popup_age').iziModal('close');
});

//set cookie for 3 days when iziModal is closed.
$(document).on('closed', '#popup_age', function (e) {
    Cookies.set('popup_age', '1', { expires: 3 });
});
</script>

asp111 avatar Aug 18 '20 07:08 asp111