- Setup the Modal Module
- Opening Methods
- Open from Another Module
- Automatic Popup
- Pop Up by Events
- Pop Up on URL Hash
Setup the Modal Module
Any module can be used as a modal, however it first needs a close button added to it, and some optional modal settings configuration. Then it can be embedded into a post or page in a modal specific way.
Open the module you wish to use in the editor, then follow the steps below.
Add a Close Button
Step 1: In Design Mode, use the Add sidebar to add a layer to act as a close button.
It doesn’t have to be an actual button layer. You can use an icon, text, or anything you choose.
For example, in the Oceanview Villa -> template, the gallery modal uses a group containing text and icon layers.
Note that if your modal module will have more than one slide, switch into the Static Slide 1 and add your close button there so it’s always accessible.
Step 2: With the button layer selected, switch into Action Mode 1 then click + Add New Action 2.
Step 3: In the settings panel for the new action, click the Type setting 1.
Step 4: In the dropdown that appears choose Close Modal.
Note that you should not change the Module setting, leave it as the default Select a Module 1. This will ensure the Close Modal action applies to the current module.
Configure Modal Settings (Optional)
Additional settings for modal modules can be found via the Top Bar, under Settings -> Use as Modal.
Here you can optionally set if the page can be scrolled while the modal is open 1, set a custom class on the page body 2 when the modal is open, and configure some animation 3 and style settings 4.
Embed as Modal
Once the module is prepared to be used as a modal, it must be embedded in a post/page in a modal specific way. Here’s how for either shortcode or Slider Revolution block embed methods.
Embed via Shortcode
Step 1: In the Top Bar click the Publish button 1.
Step 2: From the Module Embedding Window, copy the modal shortcode 1.
Step 3: Paste the modal shortcode into a post or page.
Be sure to embed the modal shortcode, not the regular shortcode, or the module will appear directly in the page instead of being hidden until it’s triggered to open.
Embed via Block
Step 1: In a post/page, add a Slider Revolution block.
Step 2: Select your modal module.
Step 3: With the newly added block selected, in the right sidebar go to the Block tab 1 and expand the Use as Modal section 2.
Step 4: Toggle Insert Module as Modal (Popup) to active.
Opening Methods
Once your modal module is prepared and embedded, there are multiple methods to open it.
Let’s run through each method.
Open from Another Module
Any module can be used to open a modal, it just needs an open button, and to be embedded in the same page as the modal module.
Add an Open Button
Step 1: In Design Mode, add a layer to act as an open button.
As before, it can be any layer type you like. In the Oceanview Villa -> template, a “View Gallery” button is used.
Step 2: With the button layer selected, switch into Action Mode then click + Add New Action.
Step 3: In the settings panel for the new action, click the Type setting.
Step 4: In the dropdown that appears choose Open Modal.
Step 5: Click the Module setting 1 to open its dropdown.
Step 6: Find and select your modal module from the list.
Step 7: Click the Slide setting 1.
Step 8: Select the slide you wish to appear first when the modal opens.
Embed Opening Module
The opening module should now be embedded in the same post/page as the modal module.
Once again, you can embed using either a shortcode or a block, this time in the normal fashion instead of the modal specific way.
Embed via Shortcode
Step 1: In the Top Bar click the Publish button.
Step 2: From the Module Embedding Window, copy the normal shortcode.
Step 3: Add the normal shortcode to the same post/page where you embedded the modal module.
Embed via Block
Step 1: Add another Slider Revolution block to the post/page where you embedded the modal module.
Step 2: Select your opening module.
Now, with both modules embedded, when you click the open button on the opening module, your modal module will appear.
Automatic Popup
It’s also possible to have a modal module automatically popup when a person visits the page. Popup can be triggered once per session (per visitor), after a certain time has elapsed, or when a visitor scrolls to a certain position.
This method of opening relies on the modal module being embedded via a Slider Revolution block.
Step 1: Select the modal module block, and in the right sidebar go to the Block tab and expand the Use as Modal section.
Step 2: Activate 1 Time Per Session, Pop Up after Time, or Pop Up at Scroll Position.
Step 3: Configure the additional settings for your selected popup trigger to your liking.
Pop Up by Events
If you wish to trigger a modal popup via custom JavaScript from outside a module, this is also possible.
Step 1: Select the modal module block, and in the right sidebar go to the Block tab and expand the Use as Modal section.
Step 2: Activate Pop Up by Events.
Step 3: Copy the provided event name for use in your code.
For example, the event:
popup_Oceanview-Villa-Gallery-Modal
…might be used to trigger modal popup via:
document.dispatchEvent(new Event("popup_Oceanview-Villa-Gallery-Modal"))
Pop Up on URL Hash
The final method of modal opening is by adding the slider alias as a URL hash to the end of the embed page’s permalink. When that URL hash is opened in a browser, the modal will popup.
Step 1: Select the modal module block, and in the right sidebar go to the Block tab and expand the Use as Modal section.
Step 2: Activate Pop Up on URL Hash.
Step 3: From the Module Info section, copy the Alias 1.
Step 4: Append # + the alias to the page permalink to create the popup trigger.
Note that this URL hash can also be used in inline links to create a simple text link trigger in the page. For example:
