SiteOrigin Modal Widget
FREE
PRIME
The SiteOrigin Modal widget creates popup boxes that are opened when a widget on the page is clicked. The modal can contain any page builder content and are a great way to show additional information such as maps, special offers, videos, image galleries and contact forms.
Populate the modal with any page builder content.
Add header videos to the top of the modal.
Toggle the modal when any element is clicked, not just buttons.
Position the modal at the top and middle with full width (containers).
Distraction free full screen modals.
How to Toggle Modals
To open (toggle) a modal you will need to take two steps. First add the Modal widget to a page and give it an ID. Next add a different widget and set it's Attribute key as 'uk-toggle' and it's Attribute value to 'target: #YOUR_ID' as shown in the image. You can add the Attribute to any element.
Add a Modal Widget and a toggle element to the page. You can set the toggle Attribute on any widget, row or cell.
Give the Modal an ID we will use to target it.
On the toggle element set the data Attribute..
Building Modal Content
Building the content for a modal is just the same as building any other Page Builder content section. Set the Template to Content and open the Content page builder to start building.
Screen Position
Modals appear from the top of the screen by default, to position the modal in the middle center of the screen use the Center Modifier.
Adjusting the Width
By default the modal will have a small width. To use your customiser Container settings as the width of the modal set the Container Modifier to Container.
Video Headers
A video can be placed above the content of the modal as a header. Set the Template to Video and choose a video from your library.
Full Screen Modal
The modal can be displayed full screen using the Full Modifier giving more space to build with. The Close Modifier should be set to Inside for full modals.
Scroll to top