Attempting to open a modal on page load when ACF data type set

Support
#1

Hello,
What I’m trying to do is open a modal window on page load when a particular ACF data type is present. If ACF data type Emergency is set I want to output a modal window (see attached png in secret note) with Emergency details and open that by default. I have tried to cannibalize another modal and set some custom id and class names then trigger the modal on load with :
document.addEventListener('DOMContentLoaded',()=>{ alert('yep'); window.xToggleUpdate('emergency-event-modal', true); });

It isn’t working but I think this is close. The short code that dumps the modal markup with emergency details is working. I just need to launch that modal on pageload.

#2

Hi @brocknessmonster,

Thanks for reaching out.
You need to add the Toggle Hash to the Modal element, as described in the following thread, and trigger that on document.ready instead of any other event to load the modal on pageload.




jQuery(document).ready(function($) {
    //add your code here
});

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started with custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes, which means we can’t fix it in case it conflicts with something on your site, nor will we enhance it. Further customization should be directed to a third-party developer, or you can avail One, where we answer the questions beyond normal theme support.

NOTE: Please remember that the code needs to be added to the JavaScript file, and ACF data must pass through the localize script to that specific JS file.

Thanks

#3 
function createCookie() {
    console.log('one');
    document.cookie = "mco_emergency=true; expires=" + new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toUTCString();
}

function readCookie() {
    console.log('two ');
    return (
    document.cookie
        .match("(^|;)\\s*" + "mco_emergency" + "\\s*=\\s*([^;]+)")
        ?.pop() || ""
    );
}

document.addEventListener('DOMContentLoaded',()=>{
    if (document.querySelectorAll('#emergency_flag').length == 1 ) {
        let cookieVal = readCookie();
        console.log('t ',cookieVal.trim().length);
        console.log('v ',typeof cookieVal);
        if (typeof cookieVal === 'string' && cookieVal.trim().length == 0) {
            createCookie();
            jQuery('#emergency_alert-anchor-toggle')[0].click();
        }
    }
});

Setting a cookie because I only want the modal alert to be triggered once. I dont’ understand why the jquery click isn’t triggering the modal. Entering jQuery('#emergency_alert-anchor-toggle')[0].click(); in the browser console will trigger the modal.

#4

Also tried this …

    function createCookie() {
        console.log('one');
        document.cookie = "mco_emergency=true; expires=" + new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toUTCString();
    }

    function readCookie() {
        console.log('two ');
        return (
        document.cookie
            .match("(^|;)\\s*" + "mco_emergency" + "\\s*=\\s*([^;]+)")
            ?.pop() || ""
        );
    }

    document.addEventListener('DOMContentLoaded',()=>{
        if (document.querySelectorAll('#emergency_flag').length == 1 ) {
            let cookieVal = readCookie();
            console.log('t ',cookieVal.trim().length);
            console.log('v ',typeof cookieVal);
            if (typeof cookieVal === 'string' && cookieVal.trim().length == 0) {
                createCookie();
                window.xToggleUpdate('#emergency_alert', true);
            }
        }
    });

Also a fail.

#5

Hey @brocknessmonster,

Could you please provide the URL where you have applied the JS code to trigger the Modal on the page?

Thank you in advance.

#6

I’ll leave it here in a secret note but I don’t think you’ll be able to reach the site as the firewall will likely filter out traffic from outside the US.

#7

Hello @brocknessmonster,

I tried to access the given site URL, but it is not accessible. I tried with the VPN, but it is not accessible on my end. I would suggest you please disable the IP restriction so we can check it on our end.

Thanks

#8

Thanks. I will see what I can do. Will update here when IP restriction changes.

#9

My network engineer tells me you should be able to view the site now. Thank you.

#10

Hi @brocknessmonster,

Unfortunately, your website still can’t be accessed and is showing the This site can’t be reached error. It seems that IP restrictions are added here. I would suggest you deactivate the IP Restriction and let us know for further assistance.
Please remember that we are from different parts of the world, and most of us have a dynamic IP, so we can’t provide a specific IP address to you for whitelisting.

Thanks

#11

I tried adding a setTimeout() to delay triggering the modal. That seems to have solved my dilemma. Thx for the help.

#12

Glad you’ve figured it out @brocknessmonster