Complete Example of Using Plone Mockups Modal Pattern to open modal on page launch

custom.js

window.onload = setTimeout(function () {
document.querySelector("#my-modal .pat-plone-modal").click(); 
}, 5000);
// note the use of #my-modal before .pat-plone-modal this makes the selector specific to the
// modal you want, in case there may be other modals on the site.

custom.xml

<!-- custom rule for the modal it places it at the bottom of the site -->
<after css:theme-children="body">
       <include css:content="#my-modal" 
          href="@@rapido/modal/blocks/modal" />
</after>

rapido-modal.html

<!-- I would locate this file under
rapido/modal/blocks/modal.html
-->
<div id="my-modal">
<a href="#modal1" class="plone-btn plone-btn-large plone-btn-primary pat-plone-modal"
                     data-pat-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>
   <script src="++theme++my-theme/path/to/custom.js?ikd"> </script>
   <!-- I usually add a unique string after the js file for cache-busting purposes -->
</div>