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.

The majority 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. Near each option you find the respective attribute to be used in the tag to override the setting.

The syntax for overruling settings in the {modal} tag is the same seen in the above examples of the Tutorial:

{modal url="my/url" attribute="value" attribute="value"}...{/modal}

Styling

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.
Style   Select a style to use for the modal popup windows
Transition transition The transition type. Can be set to elastic or none.
Speed speed Sets the speed of the transitions, in milliseconds. Default: 300
Return Focus returnFocus If true, focus will be returned when the modal exits to the element it was launched from.
Fast Iframe fastIframe If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
Enable Overlay overlay If true, an overlay will cover the rest of the website, behind the modal.
Overlay Opacity opacity The overlay opacity level. Range: 0 to 1. Default: 0.8.
Overlay Close overlayClose If true, enables closing the modal by clicking on the background overlay.
Close Button closeButton If true, enables the close button.
Enable Countdown Bar countdown If true, there will be a countdown bar at the top of the modal when using the autoclose feature.
Enable ESC Key escKey If true, enables closing the modal on 'esc' key press.
Enable Arrow Keys arrowKey If true, enables the left and right arrow keys from navigating between the items in a group.

Dimensions

Width width Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). Leave empty to attempt auto-sizing.
Height height Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%). Leave empty to attempt auto-sizing.
Width External Pages externalWidth Set the fixed dimension for external URLs. In pixels (ie 500) or percentage (ie 80%).
Height External Pages externalHeight Set the fixed dimension for external URLs. In pixels (ie 500) or percentage (ie 80%).
Initial Width initialWidth Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%). Default: 600.
Initial Height initialHeight Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%). Default: 450.
Maximum Width maxWidth Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum. Default: 95%.
Maximum Height maxHeight Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum. Default: 95%.
Auto-Correct Resize   If selected, the modal popup will do an extra resize after the content in the modal is loaded. This will fix sizing issues with certain types of content.
Auto-Resizing Delay (ms)   The Delay (in milliseconds) after which the modal should do the auto-correct resize. Increase this value if you have (slower) scripts causing changes in the modal content dimensions.

Positioning PRO

Fixed fixed If true, the modal will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document.
Reposition reposition If true, repositions the modal if the window's resize event is fired.
Top top Controls the modal's vertical positioning instead of using the default position of being centered in the viewport. Accepts a pixel or percent value (50, 50px, 10%).
Bottom bottom Controls the modal's vertical positioning instead of using the default position of being centered in the viewport. Accepts a pixel or percent value (50, 50px, 10%).
Left left Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport. Accepts a pixel or percent value (50, 50px, 10%).
Right right Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport. Accepts a pixel or percent value (50, 50px, 10%).

Media

Images

Auto Titles auto_titles If true, the title will automatically be set based on the file name. This only applies to media files.
Case Auto Titles title_case 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.
Default: a,the,to,at,in,with,and,but,or
Scale Images scalePhotos If true, and if maxWidth, maxHeight, width or height have been defined, the modal will scale images to fit within the those values.
Retina Image retinaImage If true, the modal will scale down the current photo to match the screen's pixel ratio
Retina URL retinaUrl If true, and the device has a high resolution display, the modal will replace the current photo's file extension with the retinaSuffix + extension
Retina Suffix retinaSuffix When "retinaUrl" is set to yes:
If true, and the device has a high resolution display, the href value will have it's extension extended with this suffix. For example, the default value would change my-photo.jpg to

Thumbnails PRO

Create Thumbnails 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 (both dimensions specified).
Scale using fixed...   When "Resize Method" is set to "Scale":
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.
Width thumbnail-width Set the width of the resized image in pixels.
Height thumbnail-height Set the height of the resized image in pixels.
Only on Filetypes   Select the filetypes to do resizing on.
Options: GIF, JPG, PNG
JPG Quality thumbnail-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
Folder thumbnail-folder The folder containing the resized images. This will be a subfolder of the folder containing your original images. Default: resized.
Legacy Suffix Support   Switch on to let Modals use images with the defined suffix as the thumbnail.
Thumbnail Suffix thumbnail-suffix When "Legacy Suffix Support" is set to yes:
Set the suffix used for the thumbnail images.

Galleries PRO

Show All Gallery Thumbnails thumbnails If selected, all thumbnails in the given gallery folder will be automatically shown.
Image Separator 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.
File Filter filter The filter (Regular Expression) used to find the image files in the given gallery folder. Default: \.(png|jpg|jpeg|gif|eps|bmp)

Groups / Slideshows PRO

Auto Group   Select to automatically group certain filetypes to create series / galleries.
URL/File Filter   When "Auto Group" is set to yes:
The filter (Regular Expression) used to define which URLs/file types to group automatically.
Preloading preloading If true, the 'Next' and 'Previous' content in a group will get preloaded after the current content has finished loading.
Loop loop If true, enables the ability to loop back to the beginning of the group when on the last element.
Slideshow slideshow If true, adds an automatic slideshow to a content group / gallery.
Slideshow Speed slideshowSpeed Sets the speed of the slideshow, in milliseconds. Default: 2500.
Slideshow Auto slideshowAuto If true, the slideshow will automatically start to play.

Auto-Convert

Class names

Auto-Convert If selected, all links with one of the given class names will be converted to modal popups.
Class names A comma separated list of class names. Links that have any of the defined class names will be converted to modal popups. Default: modal

External Links PRO

Auto-Convert If selected, all links to external sites will be converted to modal popups.

Target Blank PRO

Auto-Convert If selected, links that have a target="_blank" will be converted to modal popups.
Internal Links If selected, all links to internal sites that have a target="_blank" will be converted to modal popups.
External Links If selected, all links to external sites that have a target="_blank" will be converted to modal popups.

Filetypes PRO

Auto-Convert If selected, all links to files that match one of the given filetypes will be converted to modal popups.
Filetypes A comma separated list of filetypes. Links that point to any of the defined filetypes will be converted to modal popups.

URL matches PRO

Auto-Convert If selected, all links that match the URL selection will be converted to modal popups.
URL matches Enter (part of) the URLs to match. Use a new line for each different match.
Use Regular Expressions Url parts will be matched using regular expressions. So make sure the string uses valid regex syntax.
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 popups.
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. Default: modal
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.

Editor Button Options

Button Text This text will be shown in the Editor Button.
Default: "Modal"
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.
Default: modal
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.
Default: modalcontent
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.
Open as Iframe iframe If true, specifies that content should be displayed in an iFrame. For external urls this is automatically set to true.
Load scripts/styles   Select to load the scripts, styles and other document head data in the inline modal content. Only enable when certain functionality/styling isn't working inside the modal windows.
Media File Types   A comma separated list of file types to interpret as media files.
Iframe File Types   A comma separated list of file types to always open in iframe mode.
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 Background Scrolling   Select to disable the main window from scrolling along when the modal is opened.
Disable on Mobile   Select to open links normally (not in modal windows) on narrow screens.
Disable Pageload Popups on Mobile   Select to disable modal popups entirely for modals set to open on pageload.
Max Width Mobiles   The maximum width in pixels for which to disable Modals.
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 system 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.
Use Media Versioning   Select to add the extension version number to the end of media (js/css) urls, to make browsers force load the correct file.
Load jQuery Script   Select to load the core jQuery script. You can disable this if you experience conflicts if your template or other extensions load their own version of jQuery.

Other attributes

The following are other special attributes that are not available as Global Settings, but can be set individually inside each {modal} tag, as described above in the respective sections of this Tutorial.

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 and the overlay.
fullpage If true, loads an internal page as a full page (including all module positions).
photo If true, this setting forces the modal to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg')
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 2000.
open If true, the modal will open automatically on pageload. Can also be set to once to open once per visitor.
delay Sets a delay in milliseconds for modals automatically opened on pageload, such as 7500.
id Assigns an id attribute to make the modal automatically open via URL with ?modal=my_example
navigation If false, hides the navigation arrows for Groups / Slideshows.
scrolling If false, the modal will hide scrollbars for overflowing content. This could be used for a smoother transition if you are appending content to an already open instance of the modal.
onOpen Callback that fires right before the modalbegins to open.
onLoad Callback that fires right before attempting to load the target content.
onComplete Callback that fires right after loaded content is displayed.
onCleanup Callback that fires at the start of the close process.
onClosed Callback that fires once the modal is closed.