Plugin Shortcodes
Add {popup …} …content… {/popup} shortcodes in articles, modules, or components. You can popup text, images, iframes, and YouTube/Vimeo/Google Maps URLs from text links, pill buttons, or image triggers.
Place block-level shortcodes outside <p> tags when the popup body contains block elements to avoid inline content showing on the page.
General Options
| Option | Example | Description |
| text | text="Click Here" | Link label for text or button triggers. |
| popwidth | popwidth="720px" | Popup width. Uses plugin default when omitted (Modern: 860px; Classic: 500px). |
| popheight | popheight="480px" | Popup max height. Uses plugin default when omitted. |
| url | url="https://www.youtube.com/watch?v=VIDEO_ID" | External URL for iframe/media popups (YouTube, Vimeo, Google Maps). |
| autoplay | autoplay="1" | Video autoplay for media URL popups (0 or 1). |
| class | class="ibtn ibtn-blue" | CSS classes. Use ibtn ibtn-* for pill buttons or imgmargin-10 for image spacing. |
| icon | icon="fa-plus" | Font Awesome icon before trigger text or on overlays. |
Image & Overlay Options
| Option | Example | Description |
| image | image="images/corporate/small/1.jpg" | Image path for an image-based trigger (local or full URL). |
| imgwidth / imgheight | imgwidth="320px" | Thumbnail dimensions for the image trigger. |
| alt | alt="Image description" | Alt text for SEO and accessibility. |
| overlaytext | overlaytext="View details" | Caption text on the image overlay. |
| overlay | overlay="true" | Keep overlay visible without hover. |
| overlaybgcolor | overlaybgcolor="#333333" | Overlay background colour. |
| overlaytextcolor | overlaytextcolor="#ffffff" | Overlay text colour (default #ffffff). |
| overlayopacity | overlayopacity="0.7" | Overlay opacity (0.1 to 1). |
| overlaypadding | overlaypadding="10px" | Padding around overlay text and icon. |
| overlayfontsize | overlayfontsize="18px" | Overlay text font size. |
| overlaytextborder | overlaytextborder="2" | Border thickness around overlay text (default 0). |
Predefined Button Classes (ibtn)
| Type | Class Name |
| Red Button | ibtn ibtn-red |
| Orange Button | ibtn ibtn-orange |
| Blue Button | ibtn ibtn-blue |
| Grey Button | ibtn ibtn-grey |
| Green Button | ibtn ibtn-green |
| Yellow Button | ibtn ibtn-yellow |
| Violet Button | ibtn ibtn-violet |
| Dark Blue Button | ibtn ibtn-dark-blue |
Helper Shortcode
{clearfix} — clears floats after image triggers or floated content inside a popup.
Examples
Simple Text Popup
{popup text="Simple Text Popup" popwidth="500px" popheight="300px"} <img style="float:left;margin-right:5px;" src="/images/corporate/small/1.jpg"/>Lorem ipsum dolor sit amet.{clearfix}{/popup}
Icon + Text Popup
{popup text="Open details" icon="fa-plus" popwidth="720px" popheight="480px"}Your content here{clearfix}{/popup}
Image with Overlay
{popup image="images/photo.jpg" overlaytext="View Image" icon="fa-eye" overlaybgcolor="#000" overlaytextcolor="#fff" overlayopacity="0.8" imgwidth="320px" imgheight="240px"}Your content here{clearfix}{/popup}
YouTube Video Popup
{popup url="https://www.youtube.com/watch?v=VIDEO_ID" text="Watch Video" icon="fa-play" popwidth="853px" popheight="480px" autoplay="1"}{/popup}
Button Style Popup
{popup class="ibtn ibtn-yellow" icon="fa-comment" text="Click Me" popwidth="600px" popheight="300px"}Your content here{clearfix}{/popup}
Tip: For more examples, use the Shortcode Examples tab in plugin configuration.