Have more control over how to display modals, when to show them and how you want the user to interact with them.
Control when you want the modal to open. You can choose multiple triggers.
On page load (after x seconds) – Choose a number of seconds after the initial page load to display.
On page load (incl. URL parameter) – Modal will load on page load, but only if there’s a URL parameter that contains the string that you enter. Useful for targeting visitors that have come from specific links where you’ve added some URL parameters. https://mysite.com/?ref=weeklynewsletter etc.
On scroll number of px – Modal will show after the user has scrolled a set number of px down the page.
On scroll to element – If using on templates, the pages are likely to be different sizes, so you can add a selector for an element so when the user scrolls to that element the modal will show. This way you know they’ve definitely reached the end of the article, or reached the footer etc.
On page exit intent – Once the user attempts to exit the page by moving the cursor or clicking away from page, the modal will show. This will only happen once, if they close and then try to leave again it won’t show.
After number of page views – Choose the number on pages of your site that the user needs to visit before displaying the modal. The counter will restart so if you want to show it every 10 pages, set to 10. If you only want to show it once on the 10th page but never again, see the ‘show again’ settings below to control this.
After time inactive – Choose the number of seconds the user is idle for before showing the modal. This means no clicks, no scrolling, no moving the cursor or tapping on a mobile device for x seconds.
On click element – Make the modal show everytime the user clicks the element of your choice. Useful for call to action buttons etc where you’d want it to display everytime it’s clicked.
On hover element – If you need info to popup each time a user hovers over a specific element, you can just enable this setting and add the selector for the element.
Programmatically – The modal can also be easily opened and closed programmitically with JS if you need to integrate it to work with some custom code or other plugins. Details found at the bottom of the page.
Depending on how you’re triggering the modal, it may be that you don’t want to show the modal again to the same user. Or if you do, only allow it after a certain time period.
Show again on next visit – This means each time the page loads the modal will do the same as it did the first time. You probably don’t want this if you’re displaying the modal on page load or after scrolling as it could get annoying. If you’re displaying after 10 page views, it makes more sense.
Never show again – This will strictly never show the same modal to the same user.
Only show after: Set the number of days and hours that need to pass before the modal would be allowed to be shown to the same user. After that time passes, the trigger goes back to doing what it did the first time they visited.
For a fast workflow, the vertical and horizontal positioning of the modal can be done straight from the general tab with the nine common positions for a modal or popup. Use the margin control to move the modal away from the edges of the viewport.
Disable Scroll – it’s recommended to keep this enabled to allow the user to scroll the modal instead of the page content. if disabled the user can continue to scroll the page. Only useful to disable when the modal is very small and you want the user to be able to continue reading the page while the modal is visible.
Autofocus in Modal – Enabling will move the focus to the first focusable element inside of the modal when the modal is opened. eg a button, link or a form input. The focus willbe trapped inside the modal until the modal is closed.
Click backdrop to close – If enabled, the backdrop will be clickable and will close the modal when it’s clicked. If disabled, the user can only close the modal by clicking a close button or pressing ESC.
Trigger only once – if using multiple triggers such as scrolling to a specific section and after a certain amount of idle time, you may want the modal to actually only shown once with whichever trigger is triggered first. Enabling this setting means that once the modal has shown, all other triggers are cancelled for that page visit. (in other words, it changes the list of triggers to OR instead of AND)
The close button consists of an icon and text that can be customised or removed. The aria-label for the button can be customised also (aria label’s provide more information about the button for users who use assistive technology, such as screen readers)
Any element can be used as a close button if you don’t want to use the default icon/text button. You can turn an element into a close button by giving it the attribute ‘data-x-modal-close’ using Zion Builder’s custom attributes feature in the advanced tab.
To change the movement of the modal when it opens and closes here you can change both the ‘start position’ and the ‘end position’.
The start position is the position the modal is in before it appears. The end position is the position it moves to as it closes.
You can use the preview options to view the modal in it’s different positions.
You can use JavaScript to open/close the Modal with the xOpenModal() and xCloseModal() functions. Just pass in the selector of the modal, eg if the modal ID is ‘modal-1’..
xOpenModal( '#modal-1' )Need something to happen when the modal either closes or opens? You can listen for the events ‘x_modal:open’ and ‘x_modal:close’ to run your code as they happen.
eg code..
let modal = document.querySelector('#modal-1');
// Listen for modal opening
modal.addEventListener("x_modal:open", function() {
// add your code here
});
// Listen for modal closing
modal.addEventListener("x_modal:close", function() {
// add your code here
});