Riverworks Logo
⚲

Popup Examples

WordpressJavaScriptOctober CMSDiviCode Snippets

Option 1

Create a section in the Divi library, and use the following JavaScript. It will show the popup when a button is clicked. (Alani Smiles Site Example)

// Website Popup
const websitePopup = document.querySelector('#website-popup');
const popupSection = document.querySelector('#website-popup #popup-section.et_pb_section');
// If it exists and isn't display none, show popup
if (popupSection && popupSection.style.display != "none") {
    // Let all links with href="#popup" trigger the popup
    var popupLinks = document.querySelectorAll('a[href="#popup"]');
    popupLinks.forEach(function(elem) {
        elem.addEventListener('click', function(e) {
            e.preventDefault();
            document.body.classList.add('popup-active');
        });
    });

    // If the user clicks outside of the popup, hide the popup.
    websitePopup.addEventListener('click', function(e) {
        if (e.target.closest('.popup-content')) return;
        document.body.classList.remove('popup-active');
    });
    
    // If the user click the X button, close the popup.
    var popupClose = document.querySelector('.popup-close');
    popupClose.addEventListener('click', () => {
        document.body.classList.remove('popup-active');
    });
}



functions.php:

function footer_website_popup() {
    ?>
        <div id="website-popup">
            <div class="popup-content">
                <a class="popup-close">X</a>
                 <?php echo do_shortcode('[et_pb_section global_module="1595"][/et_pb_section]'); ?>
            </div>
        </div>
    <?php
}
add_action('get_footer', 'footer_website_popup');

Option 2

Use a Divi section in the Divi library. Show the popup once per day per user. (Talking Water site example)

Functions.php : 

function footer_website_popup() {
    ?>
        <div id="website-popup">
            <div class="popup-content">
                <a class="popup-close">X</a>
                 <?php echo do_shortcode('[et_pb_section global_module="2230"][/et_pb_section]'); ?>
            </div>
        </div>
    <?php
}
add_action('get_footer', 'footer_website_popup');


Extra.js : 

const sitewidePopup = document.querySelector('#website-popup');
const popupSection = document.querySelector('#website-popup #popup-section.et_pb_section');
window.addEventListener('load', function() {
    const now = new Date();
    const today = now.toDateString();
    const lastPopupDate = localStorage.getItem('lastPopupDate');

    // Check if the popup status has expired
    if (lastPopupDate !== today) {
        if (popupSection && popupSection.style.display != "none" ) {
            setTimeout(function() {
                sitewidePopup.classList.add('popup-active');
            }, 500);
        }

        localStorage.setItem('lastPopupDate', today);
    }

    const popupClose = document.querySelector('#website-popup .popup-close');
    popupClose.addEventListener('click', function() {
        sitewidePopup.classList.remove('popup-active');
    });

    sitewidePopup.addEventListener('click', function(e) {
        if (e.target.closest('.popup-content')) return;
        sitewidePopup.classList.remove('popup-active');
    });
});


Style.css : 

/* Website Popup */
#website-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.25);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding: 30px;
}
#website-popup.popup-active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
#website-popup .popup-content {
    position: relative;
    max-width: 900px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow:  5px 5px 35px black;
}
#website-popup .popup-close {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 9;
    transition: 0.25s;
    cursor: pointer;
}
#website-popup .popup-close:hover {
    opacity: .5;
}

Option 3

To display a popup once per user, with a 1 second delay (Action Rentals Site Example):

var popupStatus = localStorage.getItem('popupStatus1');
window.addEventListener('load', function() {
    if (!popupStatus) {
        setTimeout(() => {
            document.body.classList.add('popup-active');
            localStorage.setItem('popupStatus1', 1);
        }, 1000)
    }
});
    
var popupHolder = document.querySelector('.popup-holder');
var popupClose = document.querySelector('.popup-close');
popupHolder.addEventListener('click', function(e) {
    if (e.target.closest('.popup')) return;
    document.body.classList.remove('popup-active');
});
popupClose.addEventListener('click', function() {
    document.body.classList.remove('popup-active');
});

Option 4

Show popup once a day per user (Main Street Meats Site Example):

const sitewidePopup = document.querySelector('.popup-holder');
window.addEventListener('load', function() {
    let popupStatus = localStorage.getItem('popupStatus');
    let popupTimestamp = localStorage.getItem('popupTimestamp');
    let now = new Date().getTime();

    // Check if the popup status has expired
    if (popupTimestamp && now - popupTimestamp > 24 * 60 * 60 * 1000) {
        localStorage.removeItem('popup');
        localStorage.removeItem('popupTimestamp');
        popupStatus = null;
    }

    if (sitewidePopup && !popupStatus) {
        setTimeout(function() {
            sitewidePopup.classList.add('popup-active');
            localStorage.setItem('popup', 'shown');
            localStorage.setItem('popupTimestamp', now);
        }, 500);
    }
    
    const popupClose = document.querySelector('.popup-holder .popup-close');
    popupClose.addEventListener('click', function() {
        sitewidePopup.classList.remove('popup-active');
    });

    sitewidePopup.addEventListener('click', function(e) {
        if (e.target.closest('.popup-content')) return;
        sitewidePopup.classList.remove('popup-active');
    });
});