By default the modal will have a close button in the top right. Clicking that will close the modal.
Also, you can close the modal by clicking on the website overlay, so anywhere outside the modal window.
And thirdly, hitting the Esc
key on the keyboard will close the modal.
But there are other ways to close the modal too.
Custom close button
You can include a close button inside your content by triggering the Modals javascript close()
function.
<button onclick="RegularLabs.Modals.close();">Close this Modal</button>
When you want to close the modal from inside the modal that is opened in an iframe (which is the default for URLs), you should add a prepending parent.
part. So:
<button onclick="parent.RegularLabs.Modals.close();">Close this Modal</button>
You can also trigger that javascript function in other ways, like when submitting a form.
You might want to disable the other closing methods. You can hide the close button and disable the click outside the modal.
You can do that by either disabling these in the Modals plugin settings or by adding attributes to the {modal}
tag.
PRO However, these settings and plugin tag attributes are only available in the pro version.
{modal content="close-my-modal" show-close-button="false" close-on-outside-click="false" keyboard-navigation="false"}Modal with a custom Close Button{/modal} {modalcontent close-my-modal} <p>You can only close this modal with this button:</p> <p><a class="button-red" onclick="RegularLabs.Modals.close();">Close this Modal</a></p> {/modalcontent}
Auto-Close PRO
You can make a modal window auto-close after a given amount of time using the auto-close
attribute.
To make the modal close after a default time of 5 seconds, simply add the auto-close="true"
attribute:
{modal url="my/url" auto-close="true"}...{/modal}
But you can also set a different time in milliseconds. So if you want to auto-close the modal after only 2 seconds, do:
{modal url="my/url" auto-close="2000"}...{/modal}
As you can see in the above examples, Modals shows a countdown bar (grey line) at the top of the modal popup.
If you don't want that countdown to show, you can switch off the global "Enable Countdown Bar" setting in the Modals plugin settings, or you can override it for an individual modal by adding a show-countdown="false"
attribute.