A modal frame allows you to display images, content, and other websites in a "lightbox" that hovers over the top of a page on your website. Modals are not blocked by popup blockers as they are part of the webpage. There are a few different ways you can leverage a modal frame on your site.
Example of a modal
Creating a Modal Frame
To add a Modal Frame, click Insert on the WYSIWYG editor and select Modal Frame. You'll be presented with 6 options:
- URL to display in the Modal (required): This is the URL you'd like to show. It can be an image link, page link, or a video link.
- Block (optional): If you are using the [block] shortcode on the URL above, enter your block name here.
- Text: This will be the text displayed for visitors to click. The default text is "Click". You can use Text, Text and Image, or just Image as a click point for your modal.
- Image: Alternatively or additionally you can display an image for visitors to click.
- Modal Height (optional): The height of the modal box. The default height is a maximum of 500 pixels.
- Modal Width (optional): The width of the modal box. The default width is a maximum of 900 pixels.
Using the Modal Frame with Block Content
If you'd like to display a small portion of content in your Modal Frame such as a definition, you can use the block shortcode.
The block content needs to be created on a page other than the one the modal will appear on. On the page that will have the block content, select the Block Content shortcode from the Insert list on the WYSIWYG editor. Enter a Block Name, this his how you'll reference this block of content in the Modal Frame settings.
Inserting the shortcode will look like:
[block name="exampleblock"]Insert Content Here[/block]
Edit the portion that says "Insert Content Here" to be the content you'd like to pop up in your modal box. In the example above, the name is exampleblock, this name will be entered in the Block field of the Modal Frame settings.
You can have multiple blocks on a page (with different names), and can call multiple blocks with a corresponding modal frame on a different page.
Using the Modal Frame with YouTube or Vimeo Videos
The Modal Frame will automatically determine if a link is a YouTube or Vimeo link and display the corresponding player.
To add a YouTube video in the modal frame insert the YouTube share link, embed link, or the browser URL.
To add a Vimeo video insert the video URL.