On this page
Modals is packed with options, giving you control over how it works and behaves. Here is the full list of the options you can find in the Modals system plugin settings.
Some of the options can be also individually overruled with an attribute inside each {modal} tag, with either a true/false value, or other values, depending on the setting. In the descriptions, you will find the respective attribute to be used in the tag to override the setting.
For example, you can do:
{modal url="my/url" theme="Light" width="500" height="500"}Click Me!{/modal}Styling
| Theme | Select the default theme. Options: Dark, Light, Automatic (Default Dark), Automatic (Default Light), Classic, Custom Overrideable with: theme="..." |
| Load Stylesheet | Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet. |
| Position | Select the position of the modal. Options: Top Left, Top, Top Right, Left, Center, Right, Bottom Left, Bottom, Bottom Right Overrideable with: position="..." |
Dimensions
| Dimensions include title | Select to have the width / height be set on the container that includes the title and the description of the modal. |
Inline Content PRO
| Width | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). |
| Height | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). |
URLs (iframes)
| Width | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). |
| Height | Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). |
Media
Resize Images PRO
Images in Modals PRO
| Resize Images | If selected, resized images will be automatically created for images if they do not exist yet. The resized images will be created using below settings. |
| Resize Method | Set the type of resizing. Scale The resized image will be resized to the maximum width or height maintaining its aspect ratio. Crop The resized image will always have the set width and height. Options: Scale, Crop |
| Scale using fixed... | Select whether to resize images using the maximum width or height. The other dimension will be calculated based on the aspect ratio of the original image. Options: Width, Height |
| Width | Set the width of the resized image in pixels (ie 320). Overrideable with: width="..." |
| Height | Set the height of the resized image in pixels (ie 180). Overrideable with: height="..." |
Thumbnails PRO
| Create Thumbnails | If selected, thumbnails will be automatically created for images if they do not exist yet. The thumbnails will be created using below settings. |
| Resize Method | Set the type of resizing. Scale The resized image will be resized to the maximum width or height maintaining its aspect ratio. Crop The resized image will always have the set width and height. Options: Scale, Crop |
| Scale using fixed... | Select whether to resize images using the maximum width or height. The other dimension will be calculated based on the aspect ratio of the original image. Options: Width, Height |
| Width | Set the width of the resized image in pixels (ie 320). Overrideable with: thumbnail-width="..." |
| Height | Set the height of the resized image in pixels (ie 180). Overrideable with: thumbnail-height="..." |
| Add Itemprop | If selected, an itemprop="image" attribute will be added to the thumbnail image tag. |
Resize Settings PRO
| Folder | The folder containing the resized images. This will be a subfolder of the folder containing your original images. |
| JPG Quality | The quality of the resized images. Choose from Low, Medium or High. The higher the quality, the larger the resulting files. This only affects jpeg images. Options: Low, Medium, High |
| Max Age | The maximum age of the resized image in days. If the resized image is older than this, it will be recreated. Set to 0 to never recreate the resized image if they already exist. |
| Use Retina Images | If selected, double size images will be created and used for retina displays. |
| Retina Pixel Density | The pixel density of retina displays. This is the density at which the double sized retina image is used. |
Auto Titles
| Auto Titles | If selected, the title will automatically be set based on the file name. This only applies to media files. |
| Case Auto Titles | Select the way the auto title should be cased. Options: None, lowercase, UPPERCASE, Uppercase first letter, Titlecase (Uppercase All Words), Smart Titlecase (No Uppercasing of Certain Words) |
| Lowercase Words | A comma separated list of words of which the first word should be lowercase in the auto titles. |
Galleries PRO
| Show All Gallery Thumbnails | If selected, all thumbnails in the given gallery folder will be automatically shown. Overrideable with: showall="false|true" |
| Image Separator | Set the separator html for the images in the gallery. By default this is a space. Enter {none} to have no spacing between images. Overrideable with: gallery-separator="..." |
| File Filter | The filter (Regular Expression) used to find the image files in the given gallery folder. Overrideable with: gallery-filter="..." |
Groups PRO
| Auto Group | Select to automatically group certain filetypes to create series / galleries. Overrideable with: group="false|..." |
| URL/File Filter | The filter (Regular Expression) used to define which URLs/file types to group automatically. |
Slideshows PRO
| Auto Slideshow | If selected, adds an automatic slideshow to a content group / gallery. Overrideable with: slideshow="false|true|..." |
| Slideshow Interval | The time each modal should show before going to the next (in milliseconds). Overrideable with: slideshow="..." |
| Resume | Select to make the slideshow resume after a certain time after it has stopped. The slideshow stops when interacting with the modals. |
| Resume Timeout | The time to wait before resuming the slideshow (in milliseconds). |
Media Settings
| Lazy Loading | If selected, the images generated by Modals will get a loading=lazy attribute. |
| Media File Types | A comma separated list of file types to interpret as media files. |
Auto-Convert
Links
Class names
| Auto-Convert | If selected, all links with one of the given class names will be converted to modal popup links. |
| Class names | A comma separated list of class names. Links that have any of the defined class names will be converted to modal popup links. |
External Links PRO
| Auto-Convert | If selected, all links to external sites will be converted to modal popup links. |
Target Blank PRO
| Auto-Convert | If selected, all links that have a target="_blank" will be converted to modal popup links. |
| Internal Links | If selected, all links to internal sites will be converted to modal popup links. |
| External Links | If selected, all links to external sites will be converted to modal popup links. |
Filetypes PRO
| Auto-Convert | If selected, all links to files that match one of the given filetypes will be converted to modal popup links. |
| Filetypes | A comma separated list of filetypes. Links that point to any of the defined filetypes will be converted to modal popup links. |
URL matches PRO
| Auto-Convert | If selected, all links that match the URL selection will be converted to modal popup links. |
| URL matches | Enter (part of) the URLs to match. Use a new line for each different match. |
| Use Regular Expressions | Select to treat the value as regular expressions. |
| Exclude URLs | A comma separated list of (part of) URLs to exclude. |
Images PRO
| Auto-Convert | If selected, all images with one of the given class names will be converted to modal popup links. |
| Class names | A comma separated list of class names. Images that have any of the defined class names will be converted to a modal popup gallery. |
| Use Title Attribute | Select to use the title attribute in the image tag as the title or description of the modal popup. |
| Use Alt Attribute | Select to use the alt attribute in the image tag as the title or description of the modal popup. |
Behaviour PRO
| Enable Keyboard Navigation | Enable keyboard navigation for the modal popups. Use the left and right arrow keys to navigate through the modal popups. Use the escape key to close the modal popup. |
| Show Close Button | Show a close button to close the modal. |
| Close on Outside Click | Close the modal when clicking outside of it. |
| Show Countdown | Select to show a countdown timer before the modal closes (when using the autoclose option) or when the next modal popup opens (when using slideshows). Overrideable with: showcountdown="false|true" |
| Pagination | Select to show the pagination as buttons or text when using groups or galleries. Options: None, Buttons, Text Overrideable with: pagination="false|Buttons|Text" |
| Divider | The divider between the slide number and the total number of slides. |
| Pagination as Images | Select to show the pagination as small images when using galleries. |
| Open count based on | Select whether to base the open count on the visits on entire website or on specific page (URL). The open count is used when using the open="..."attribute. Options: Website (Cookies), Page (Cookies), Website (Session) |
| Cookie Lifetime | The of lifetime of the cookie (in minutes) used to determine the open count. Set to 0 to have no expiration time, the browser cookie will then be kept till the user removes it manually. |
| Cookie ID | Option to set a unique cookie ID for the open count |
Disable on Narrow Screens PRO
| Disable on Narrow Screens | If selected, the modal popup will be disabled on narrow screens. |
| Base on Width of | Select the element to base the width on. Options: Window, Screen |
| Break Point | The width in pixels the screen is considered as wide. |
Editor Button Options
| Button Text | Set the text to show in the button. You can use a language string. |
| Enable in frontend | If enabled, it will also be available in the frontend. |
Tag Syntax
| Modal Tag | The word used for the modal tags. You can change the word if you are using another plugin that uses this tag syntax. |
| Modal Content Tag | The word used for the modal content tags used to define content for modal links that open by id. You can change the word if you are using another plugin that uses this tag syntax. |
| Tag Characters | The surrounding characters of the tag syntax. Note: If you change this, all existing tags will not work anymore. Options: {...}, [...], «...», {{...}}, [[...]], [:...:], [%...%] |
Advanced
| Sub Template | This is the sub template used for the internal pages in the modal popup windows. There will have to be a php file with this name in your templates folder or otherwise in the system templates folder. |
| Disable on Components | Select in which frontend components NOT to enable the use of this extension. |
| Remove in Disabled Components | If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact. |
| Enable in administrator | If enabled, the plugin will also work in the administrator side of the website. Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it. |
| Place HTML comments | By default HTML comments are placed around the output of this extension. These comments can help you troubleshoot when you don't get the output you expect. If you prefer to not have these comments in your HTML output, turn this option off. |
| Add Redirect Script | If selected, a redirect script will be added to the modal pages that will make the page reload as a normal page when not opened in a modal window. |
All Tag Attributes
Here is an overview of all the available special attributes, including the ones mentioned above to override Global Settings.
All these can be set individually inside each {modal} tag, like:
{modal url="my/url" theme="Light" width="500" height="500"}Click Me!{/modal}url="..." | The url you want to open in the modal. |
text="..." | Inline text to open in the modal. |
html="..." | Inline HTML to open in the modal. You can use HTML tags written out in the value. |
content="..." | Reference to the {modalcontent} block you want to open in the modal. You can also use this to reference an existing element on the page by its ID. |
article="..." | The id, alias or title of the Joomla article you want to open in the modal. |
image="..." | Can be used to open images and automatically generate a thumbnail |
vimeo="..." | The Vimeo video ID, which will open in the modal. |
youtube="..." | The Youtube video ID, which will open in the modal. |
title="..." | Adds a title to be shown on top of the modal popup. |
description="..." | Places a description under the title of the modal popup. |
class="..." | Adds a given class to the modal link. |
classname="..." | Adds a given class to the modal popup. |
fullpage="..." | If true="...", loads an internal page as a full page (including all module positions). |
open="..." | If true="...", the modal will open automatically on pageload. Can also be set to once="..." to open once per visitor. |
autoclose="..." | If true="...", makes the modal close automatically after a default time of 5 seconds. It can also be set to a different time in milliseconds, such as autoclose="2000". |
id="..." | Assigns an id attribute to make the modal automatically open via URL with ?modal=my_example="..." |
group="..." | Group different modal links together, by giving them the same group name. |
gallery="..." | The path to a folder with images to open as a gallery. |
slideshow="true|false|..." | Set to true or false to override the global setting. Or set to a number value to switch the slideshow on with the given number as the interval (the time each modal should show before going to the next) (in milliseconds). |
showcountdown="false|true" | Override the global setting for showing a countdown timer before the modal closes. |
pagination="false|Buttons|Text" | Override the global setting for the pagination for Groups / Galleries. |
width="..." | Set a fixed width for the modal. |
height="..." | Set a fixed width for the modal. |
thumbnail-width="..." | Set a fixed width for the thumbnail generated for images and galleries. |
thumbnail-height="..." | Set a fixed height for the thumbnail generated for images and galleries. |
showall="false|true" | Override the global setting whether to show all thumbnails for galleries (true) or just show the first image (false). |
gallery-separator="..." | Override the global setting for the separator placed between the thumbnails generated for galleries. |
gallery-filter="..." | Override the global setting for the filter (Regular Expression) used to find the image files in the given gallery folder. |
theme="..." | Override the global theme. |
position="..." | Override the global setting for the position of the modal. Options: Top Left, Top, Top Right, Left, Center, Right, Bottom Left, Bottom, Bottom Right |
on-open="..." | Callback that fires right before the modal begins to open. |
on-load="..." | Callback that fires right before attempting to load the target content. |
on-loaded="..." | Callback that fires right after the content has finished loading. |
on-opened="..." | Callback that fires right after the modal is opened. |
on-close="..." | Callback that fires at the start of the close process. |
on-closed="..." | Callback that fires once the modal is closed. |