Modal pop up on page load with Mockup

I'm working on a modal popup, trying to stick to using Mockup, I'd like a modal to load on page load.

This is the example from http://plone.github.io/mockup/dev/#pattern/modal

   <a href="#modal1" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
                     data-pat-plone-modal="width: 400">Modal basic</a>
   <div id="modal1" style="display: none">
     <h1>Basic modal!</h1>
     <p>Indeed. Whoa whoa whoa whoa. Wait.</p>
   </div>

It then mentions under configuration an option called 'triggers', but it doesn't itemize the types of triggers.
I know there is click and change, I'm looking for something like immediate which is used by the contentloader pattern.
I tried immediate but that didn't work.

I think the docs are wrong, try (then remove the one you dont need):

<a href="#modal1" class="pat-plone-modal" data-pat-modal="height: 400px" data-plone-pat-modal="height: 400px">

data-pat-modal worked for me.
But I'm still working on making the modal open on page load.

While adding configuration as a list of semi-colon separated parameters is great, when there is no available parameter it becomes very inconvenient for an integrator. In this case there is no parameter that causes the pop up to launch upon page load.

I'm trying to "fake" a click, which would force the modal to open. When I do this in the interactive console it works, however it does not work when I add similar code to my script.

I was able to achieve a "fake" click which caused the modal to appear using something like the code below:

window.onload = setTimeout(function () {
document.querySelector(".pat-plone-modal").click();
}, 5000);

Note that I use the window.onload event and then wait 5 seconds before the modal is triggered. For my scenario the elements don't load into the dom immediately so the delay is important.

If you have more than one modal on the site it will trigger only the first matching one. You can improve this behaviour or be more specfic by tweaking the selector. For example, if it exists inside an element with id mybox instead of .pat-plone-modal, you might have #mybox .pat-plone-modal.

1 Like