marcelodolza / iziModal

Elegant, responsive, flexible and lightweight modal plugin with jQuery.
http://marcelodolza.github.io/iziModal/
Apache License 2.0
2.16k stars 285 forks source link

[Feature] Pop Up on exit and Cookie #158

Open ranggasan opened 6 years ago

ranggasan commented 6 years ago

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.

lstephensca commented 6 years ago

+1

asp111 commented 4 years ago

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>