Open Modal on Page Load

I don’t need a reply to this one (just close it off), as I’m only posting so others can benefit.

There are a number of posts I’ve come across requesting that a modal is triggered on page load and other various similar situations (such as this one: https://theme.co/forum/t/content-area-modal-open-on-page-load-close-button-move/30943

All that is required is a very small piece of JS added to the page:

window.onload = function () {
document.getElementById("modal_id-anchor-toggle").click();
};

Give your modal an ID (in customisation settings) and change the code above accordingly to target the correct element. e.g. if your modal has an ID of ‘modal_id’ you wouldn’t need to change any of the code above. ‘-anchor-toggle’ needs to be appended to whatever element ID you have assigned.

if you don’t want the button/trigger to show up, just remove all styling in the inspector panel, give it a width & height of 0px and then add some custom CSS in the customiser to set the display to ‘block’

e.g. $el.x-anchor { display: block; }

By default the modal trigger/button has a flex display property which can cause issues with styling (width & height @ 0px still don’t completely make it ‘disappear’ & display: none; will also make it disappear for the JS so it won’t work).

I don’t know why someone hasn’t posted this before, but there you go…

Enjoy…

Hi @sguilliard,

Thank you for sharing it with others.