Tutorial:

Introduction

Modals is a Joomla plugin extension to help you create cool modal popup, like this!

Simple Modals

Open an URL

All you have to do to create a link is place the url inside the {modal} opening tag. Place the text of the 'link' you want people to click on between the {modal} opening and {/modal} closing tag.

{modal url="my/url"}Click on me!{/modal}

Example: Internal url

{modal url="index.php/123-my-article"}Internal url{/modal}

Example: External url

{modal url="https://goo.gl/5r5faj"}External url{/modal}

Internal Full Page

You also have the ability to load an internal page as full page (including all module positions) with fullpage="true"

Example: Internal full page

{modal url="index.php/123-my-article" fullpage="true"}Internal url{/modal}

Modal Title

You can add a title by adding a title attribute in the {modal} opening tag, like:

Example: I've got a title

{modal url="https://goo.gl/5r5faj" title="That's my place :)"}I've got a title{/modal}

Open an Article

As explained before, you can simply link to a url.
To open an article in the modal window, you can use the url of the article, like:

{modal url="index.php?option=com_content&view=article&catid=1&id=123"}Link to an article{/modal}

Change the catid and id values to your actual category and article id.

Quick links Pro only

However, with the pro version of Modals you can link directly to a Joomla article without having to know the exact url. You can simply place the article's title, alias or id after the article attribute.

Examples:
Link using article title
Link using article alias
Link using article id

{modal article="My Article"}Link using article title{/modal}
{modal article="my-article"}Link using article alias{/modal}
{modal article="123"}Link using article id{/modal}

Open an Image

You can also link to images. Modals will recognise links to images and adjust the styling of the modal window a bit to accommodate this.

Example: Image

{modal url="images/fruit/bananas.jpg" title="Totally bananas"}Image{/modal}

Open a Video

Example: Youtube video

{modal url="https://www.youtube.com/embed/tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!"}Youtube video{/modal}

Example: Vimeo video

{modal url="https://player.vimeo.com/video/163836607" width="500" height="281" title="Modals Tutorial"}Vimeo video{/modal}

Quick links Pro only

Just like with the articles, the pro version of Modals provides you with the ability to create links to videos with a shorter syntax. You can simply place the youtube / vimeo video id after a youtube= / vimeo attribute.

Example: Youtube video

{modal youtube="tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!"}Youtube video{/modal}

Example: Vimeo video

{modal vimeo="163836607" width="500" height="281" title="Modals Tutorial"}Vimeo video{/modal}

Add link to an Image

To add a modal link to an image, simply place the {modal} tags around the image.

Example:

{modal url="index.php/123-my-article"}{/modal}

Width & Height

By default the modal window will auto size for internal urls and will open in the maximum size for external urls.

You can overrule the width and/or height by setting these to a fixed pixel or percentage value.

Example: 500 x 500px

{modal url="index.php/123-my-article" width="500" height="500"}500 x 500px{/modal}

Example: 60% x 40%

{modal url="index.php/123-my-article" width="60%" height="40%"}60% x 40%{/modal}

Thanks to the Modals maxWidth and maxHeight features (set to 95% by default), every modal window created by Modals will be responsive: if the browser window is smaller or gets resized to dimensions smaller than the ones of the modal window, the modal window will adapt to not exceed the size of the container.

Open menu items in modals

To make a menu item open in a modal popup, simply surround the menu title in {modal} tags.

So if your menu item title is Click here!, change it to {modal}Click here!{/modal}.

You can also pass extra variables in the tag as described earlier, like: {modal title="My Page"}Click here!{/modal} or {modal width="600" height="400"}Click here!{/modal}.

If for some reason you don't want to use the {modal} tags (or it doesn't work), you can also give the menu item a custom classname (works with most menu modules) and set Modals up to convert by that classname.

Open modules in modals

To make a module open in a modal popup, you can use any of these techniques.

You will need to use Modules Anywhere to accomplish this.

Via a new article

Create a new article and place the Modules Anywhere tag in that article, like: {module My Module}.

The simply link to that new article using Modals.

Some modules that rely on scripts and external styles may not work correctly. In that case you will need to use the iframe mode, by adding iframe="true" to the {modal} tag.

Inline module Pro only

If you are using the Pro version of Modals, you can also use the inline content tags for this, like:

{modal content="mymodule"}Click here to open My Module{/modal}
{modalcontent mymodule}
{module My Module}
{/modalcontent}

Some modules that rely on scripts and external styles may not work using the inline method. In that case you will need to use the above 'new article' method.

Open by URL Pro only

You can set Modals up to make all links to certain urls open in modal popups.

You can find the URL matches options under the Convert Existing Links section in the Modals system plugin settings.

If you - for instance - want all links to pages containing the word shop to open in a modal popup, simply enter that in the URL matches field.

Or enter some-other-website.com/ to open all external links to some-other-website.com in your website.

For even more control, you can also create URL matching rules using Regular Expressions.

Inline content Pro only

Content in separate content tag

You can use the content attribute in combination with modalcontent tags to open your custom content inside a modal.
This is great for when you don't want to create a separate article just for one link.

All you need to do is choose an alias for the modalcontent tag and place that alias as value in for the content attribute.

Example: A lot more inline content

{modal content="mycontent" title="Fully styled inline content"}A lot more inline content{/modal}
{modalcontent mycontent}
... your fully styled content...
{/modalcontent}

By using the modalcontent tags, you can place entire content blocks into the modal without the need of creating separate articles/urls.

You are also completely free to place whatever style and type of content you want in here:

Lorem Ipsum

applesPellentesque habitant morbi tristiquesenectus et netus et malesuadafames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}

Content in tag

For short and simple content, you can also place the content straight into the modal tag by using the html attribute:

Example: Show some inline text

{modal html="This text is entered right inside the modal tag." title="Hello!"}Show some inline text{/modal}

Grouping multiple modals Pro only

You can group different types of links by adding a group attribute to the modal tag.
This will give you arrow navigation to the different links inside the modal popup.

  1. Internal url
  2. External url
  3. Inline content
  4. Image
  5. Video
{modal url="index.php?option=com_content&view=article&id=123" group="mygroup"}Internal url{/modal}
{modal url="https://goo.gl/5r5faj" group="mygroup"}External url{/modal}
{modal html="This text is entered right inside the modal tag." group="mygroup"}Inline content{/modal}
{modal image="images/fruit/bananas.jpg" group="mygroup"}Image{/modal}
{modal url="https://www.youtube.com/embed/tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!" group="mygroup"}Video{/modal}

Auto-convert Images Pro only

With the pro version of Modals you can make images automatically clickable and open in a modal by simply giving the image a class name.

The default class name is modal, but you can change that in the Modals system plugin settings. You can even give a comma-separated list of class names which Modals should handle.

Modals will check if the image in your content is a thumbnail or not. It will make sure the thumbnail is shown in the content (as clickable) and the large image is shown in the modal popup.

A thumbnail is an image with the same filename as the large image, but with the thumbnail suffix.
The thumbnail suffix by default is _t, but can also be changed in the Modals system plugin settings.

To give a few examples:

You place the image apples.png in your content. You resize it to a thumbnail size and give it a class name modal.
Modals will check for the thumbnail. If apples_t.png exists, it will show that image in your content instead. When you click on the thumbnail image, the apples.png image will be openen in the modal popup.

Or, you place the apples_t.png image into your content instead and give it a class name modal.
Modals will output the same as in the previous example: it will show the thumbnail image in your content. When you click on the thumbnail image, the apples.png image will be

Galleries & Slideshows Pro only

Auto galleries

You can very easily create a gallery by a single modal tag with a gallery attribute (which holds the folder containing of your images).

You can tell Modals to show special thumbnails images in your content, by adding image files that have the thumbnail suffix added to them (default: _t).
So the thumbnail for image apples.jpg should be apples_t.jpg.

Example:

{modal gallery="images/gallery"}{/modal}

By default, the first image found in the folder in alphabetical order will be the first one to open in the gallery, as well as the one shown in the content as a thumbnail.

Custom link

If you place anything between the modal tags, that will be used as link to open the gallery, instead of the auto-generated thumbnails. This can be text or an image or basically anything you want.

Example: Click here

{modal gallery="images/gallery"}Click here{/modal}

Different first image opened Pro only

By default, the first image found in the folder in alphabetical order will be the first one to open in the gallery.

If you want to have a different image opened as the first in the gallery, add a first attribute to specify the desired image.

Example: Click here

{modal gallery="images/gallery" first="bananas.jpg"}Click here{/modal}

You also have the ability to show a random image as a thumbnail, by setting the  first attribute to random.

Example: Click here

{modal gallery="images/gallery" first="random"}Click here{/modal}

Different first thumbnail Pro only

By default, the first image found in the folder in alphabetical order will also be the one shown in the content as a thumbnail.

If you want to show a different image as a thumbnail, add a thumbnail attribute to specify the desired image.

Example:

{modal gallery="images/gallery" thumbnail="strawberries.jpg"}{/modal}

You also have the ability to show a random image as a thumbnail, by setting the  first attribute to random.

Example:

{modal gallery="images/gallery" thumbnail="random"}{/modal}

Show all thumbnails

By default only one thumbnail image will show (you can change this default setting).
To make the thumbnails of all the images show, add showall="true" to the modal tag.

Example:

{modal gallery="images/gallery" showall="true"}{/modal}

Range of thumbnails Pro only

You also have the ability to show a range of specific thumbnails, by using the attribute show="..." , with the number of first and last image you want to show. For example, to show only the first 4 thumbnails:

Example:

{modal gallery="images/gallery" show="1-4"}{/modal}

Slideshow

To create a slideshow that cycles through the images automatically, simply add slideshow="true" to the modal tag.

Example:

{modal gallery="images/gallery" slideshow="true"}{/modal}

Filter Images

If you don't want all images in the folder to show, you can overrule the default filter with your own by adding a filter attribute.

This example only shows images from folder images/fruit that end in _x (just before the file extension).

Example:

{modal gallery="images/fruit" filter="_x\."}{/modal}

Custom images and thumbnails

You might want to define your own specific images, because they are not all in the same folder.
To create a gallery with custom image paths, you can create a modal tag for every image and grouping the modals together by adding a group attribute to the modal tags.

Example:

{modal url="images/fruit/bananas_x.jpg" group="mygallery"}{/modal} {modal url="images/fruit/limes_x.jpg" group="mygallery"}{/modal} {modal url="images/fruit/strawberries_x.jpg" group="mygallery"}{/modal}

Slideshow

To create a slideshow on these custom galleries, you need to add slideshow="true" to every modal tag in the group.

Example:

{modal url="images/fruit/bananas_x.jpg" group="mygallery2" slideshow="true"}{/modal} {modal url="images/fruit/limes_x.jpg" group="mygallery2" slideshow="true"}{/modal} {modal url="images/fruit/strawberries_x.jpg" group="mygallery2" slideshow="true"}{/modal}

Titles and Descriptions

By default Modals will convert the image name to a title.

But you can override image titles and give them separate descriptions via a data.txt file which you place in the gallery folder.

Here is an example of such a file showing you the different possibilities:

description=Description for all images in the gallery

title_apples=My special title for Apples
description_apples=Description especially for Apples

title_bananas=My special title for Bananas

Auto-close modal Pro only

You can make a modal window auto-close after a given amount of time using the autoclose attribute.

To make the modal close after the default amount of time set in the Modals plugin settings, simply add the autoclose="true" attribute:

Example

{modal url="my/url" autoclose="true"}...{/modal}

But you can also set a different time in milliseconds. So if you want to auto-close the modal after only 2 seconds, do:

Example

{modal url="my/url" autoclose="2000"}...{/modal}

As you can see in above examples, Modals shows a countdown bar (blue line) at the top of the modal popup.

If you don't want that countdown to show, you can switch of the Enable Countdown Bar setting in the Modals system plugin settings.

Open modal on pageload Pro only

To make modal popup on pageload, simply add the open="true" to the {modal} tag, like:

{modal url="my/url" open="true"}...{/modal}

If you do not want to show the actual link to the page, then simply don't place any text between the {modal} tags, like:

{modal url="my/url" open="true"}{/modal}

The syntax for modal popup you can see on the demo page looks like:

{modal html="Yes, you can also make modal popups show on page load!" title="Welcome to the Modals Demo" open="true" autoclose="5000"}{/modal}

Show only once

To make a modal popup only show once, you can use open=once, like:

{modal html="This modal will only show once" open="once"}{/modal}

By default, Modals will keep track of the count via a site wide cookie. If you want this count to be based on the individual page visits, then you can change that in the Modals system plugin settings. You can also choose to base the count on the site wide session count instead.

Show on specific page loads

You can also tell Modals to show the modal on specific pageloads or a specified range of visits, using the open attributes. For instance, to show a modal on the second, third and fourth page load, you can do:

{modal html="This modal will show on visit 2, 3 and 4" open="2,3,4"}{/modal}

or:

{modal html="This modal will show on visit 2, 3 and 4" open="2-4"}{/modal}

If you want a modal to pop up on the first 5 visits and on visit 10, 15 and 20, you can do:

{modal html="This modal will show on visits, 1-5, 10, 15 and 20" open="1-5,10,15,20"}{/modal}

By default, Modals will keep track of the count via a site wide cookie. If you want this count to be based on the individual page visits, then you can change that in the Modals system plugin settings. You can also choose to base the count on the site wide session count instead.

Open with a delay

Maybe you want the modal popup to open after a few seconds.

No problem, Modals can do that too.

Simply add a delay attribute to the tag and give the time value in milliseconds.

So to open a modal popup 7.5 seconds after the page has loaded, do:

{modal url="my/url" open="true" delay="7500"}{/modal}

Editor Button

You can enter the  {modal} tags directly into your content. However, to save time typing and remembering what the exact syntax is, Modals also comes with a handy editor button.

You can use this editor button (located below the text input area) to place a {modal} tag with the desired attributes into your article (or other editor fields).

You can customize the default tag settings in the Modals system plugin settings.

Settings

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

Existing Links

Classnames

Auto-Convert If selected, all links with one of the given classnames will be converted to modal popup links.
Classnames A comma separated list of classnames. Links that have any of the defined classnames will be converted to modal popup links.

External Links Pro only

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

Target Blank Pro only

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

Filetypes Pro only

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 only

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 Url parts will be matched using regular expressions. So make sure the string uses valid regex syntax.

Images Pro only

Classnames

Auto-Convert If selected, all images with one of the given classnames will be converted to modal popup links.
Classnames A comma separated list of classnames. Images that have any of the defined classnames 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.

Default Settings

These are options that can be overridden inside the {modal} tag like you can see in above examples.

So the syntax for overruling settings in the {modal} tag is:

{modal url="my/url" setting_name="setting_value" setting_name="setting_value"}...{/modal}

The settings marked with a * can be set to a different default value in the Modals system plugin settings.

The Free version ONLY allows these settings: url, title, width, height, iframe.

NameDefault valueDescription
url / href   The url or element to open in the modal. You do not have to use the setting name in the {modal} tag if the url is defined as first parameter. So these all work:
{modal my/url}...{/modal}
{modal url="my/url"}...{/modal}
{modal href="/my/url"}...{/modal}
content   The id of the content (set by the {modalcontent} tag) to open in the modal:
{modal content="mycontent"}...{/modal}
{modalcontent mycontent}This text appears inside the modal!{/modalcontent}
html   For displaying a string of HTML or text:
{modal html="This text appears inside the modal!"}...{/modal}
title   This can be used as an anchor title alternative for the modal.
className   Adds a given class to the modal and the overlay.
iframe false If true, specifies that content should be displayed in an iFrame. For external urls this is automatically set to true.
photo false 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')
scrolling true If false, the modal will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of the modal.
open true If true, the modal will immediately open on pageload.
transition * elastic The transition type. Can be set to "elastic"or "none".
speed * 350 Sets the speed of elastic transitions, in milliseconds.
scalePhotos * true If true, and if maxWidth, maxHeight, width, or height have been defined, the modal will scale photos to fit within the those values.
returnFocus * true If true, focus will be returned when the modal exits to the element it was launched from.
fastIframe * true If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
opacity * 0.8 The overlay opacity level. Range: 0 to 1.
overlayClose * true If false, disables closing the modal by clicking on the background overlay.
closeButton * true If false, removes the close button.
escKey * true If false, will disable closing the modal on 'esc' key press.
arrowKey * true If false, will disable the left and right arrow keys from navigating between the items in a group.
Dimensions
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%).
externalWidth *   Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%).
externalHeight *   Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%)./td>
initialWidth * 600 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
initialHeight * 450 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
maxWidth * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
maxHeight * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
Positioning
fixed * false 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 * true Repositions the modal if the window's resize event is fired.
top *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
bottom *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
left *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
right *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
Groups / Slideshows
group / gallery   This allows the user to group any combination of elements together for a gallery.
preloading * true Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
loop * true If false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshow * false If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed * 2500 Sets the speed of the slideshow, in milliseconds.
slideshowAuto * true If true, the slideshow will automatically start to play.
Auto-Gallery
showall * false If selected, all thumbnails in the given gallery folder will be automatically shown.
thumbSuffix * _t The suffix to identify the thumbnail to show as the link. Example with default value '_t': if the main image is 'apple.jpg', then the thumbnail image is 'apple_t.jpg'.
thumbWidth *   Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
thumbHeight *   Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
separator * (space) Set the separator html for the images in the gallery. By default this is a space. Enter {none} to have no spacing between images.
filter * \.(png|jpg|gif|eps) The filter (Regular Expression) used to find the image files in the given gallery folder.
Retina Images
retinaImage * false If true, the modal will scale down the current photo to match the screen's pixel ratio
retinaUrl * false If true and the device has a high resolution display, the modal will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix * @2x.$1 If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change 'my-photo.jpg' to ''

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.

Advanced Settings

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: {...}, [...], {{...}}, [[...]], [:...:], [%...%]
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 If selected, modals will be opened as iframe by default. This excludes links lo media files.
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.
Exclude URLs A comma separated list of (part of) URLs to exclude.
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.
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 openOnce, openMin and openMax attributes.

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.
Max Width Mobiles The maximum width in pixels for which to disable Modals.
Disable Pageload Popups on Mobile Select to disable modal popups entirely for modals set to open on pageload.
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.
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.
Tutorial DEV:

Introduction

Modals is a Joomla plugin extension to help you create cool modal popup, like this!

How to use it (syntax)

aaaa bla bla plugin tags

Modal Link

The clickable modal link can be text, or an image, or basically anything you want. Anything you place between the modal tags will be used as link to open the modal.

To open any modal via an image, simply have the {modal} tags surround your desired image:

Example:

{modal url="index.php/123-my-article"}{/modal}

Modal Title

You can add a title by adding a title attribute in the {modal} opening tag, like:

Example: I've got a title

{modal url="https://goo.gl/5r5faj" title="That's my place :)"}I've got a title{/modal}

Width & Height

By default the modal window will auto size for internal urls and will open in the maximum size for external urls.

You can overrule the width and/or height by setting these to a fixed pixel or percentage value.

Example: 500 x 500px

{modal url="index.php/123-my-article" width="500" height="500"}500 x 500px{/modal}

Example: 60% x 40%

{modal url="index.php/123-my-article" width="60%" height="40%"}60% x 40%{/modal}

Thanks to the Modals maxWidth and maxHeight features (set to 95% by default), every modal window created by Modals will be responsive: if the browser window is smaller or gets resized to dimensions smaller than the ones of the modal window, the modal window will adapt to not exceed the size of the container.

Modal Types

URLs

All you have to do to create a link is place the url inside the {modal} opening tag. Place the text of the 'link' you want people to click on between the {modal} opening and {/modal} closing tag.

{modal url="my/url"}Click on me!{/modal}

Example: Internal url

{modal url="index.php/123-my-article"}Internal url{/modal}

Example: External url

{modal url="https://goo.gl/5r5faj"}External url{/modal}

Internal Full Page

You also have the ability to load an internal page as full page (including all module positions) with fullpage="true"

Example: Internal full page

{modal url="index.php/123-my-article" fullpage="true"}Internal full page{/modal}

Articles

As explained before, you can simply link to a url. So, to open an article in the modal window, you can use the url of the article, like:

{modal url="index.php?option=com_content&view=article&catid=1&id=123"}Link to an article{/modal}

Change the catid and id values to your actual category and article id.

Quick links Pro only

However, with the Pro version of Modals you can link directly to a Joomla article without having to know the exact url. You can simply place the article's title, alias or id, with the article attribute.

Examples:
Link using article title
Link using article alias
Link using article id

{modal article="My Article"}Link using article title{/modal}
{modal article="my-article"}Link using article alias{/modal}
{modal article="123"}Link using article id{/modal}

Images

You can, of course, also link to images. Modals will recognize links to images and adjust the styling of the modal window a bit to accommodate this.

Example: This is an Image

{modal url="images/fruit/bananas.jpg" title="Totally bananas"}This is an Image{/modal}

Thumbnail links Pro only

In addition, the Pro version of Modals provides you with the ability to link to an image modal with an automatically generated thumbnail of the image.

You can do so by using the image attribute and without placing any text between the {modal} tags, like:

Example:

{modal image="images/fruit/bananas.jpg" title="Totally bananas"}{/modal}

Videos

Example: Youtube video

{modal url="https://www.youtube.com/embed/tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!"}This is a Youtube video{/modal}

Example: Vimeo video

{modal url="https://player.vimeo.com/video/163836607" width="500" height="281" title="Modals Tutorial"}This is a Vimeo video{/modal}

Quick links Pro only

Just like with the articles, the Pro version of Modals provides you with the ability to create links to videos with a shorter syntax. You can simply place the youtube / vimeo video id after a youtube= / vimeo attribute.

Example: Youtube video

{modal youtube="tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!"}This is a Youtube video{/modal}

Example: Vimeo video

{modal vimeo="163836607" width="500" height="281" title="Modals Tutorial"}This is a Vimeo video{/modal}

Inline Content Pro only

Using the Modal Tag

For short and simple content, you can place the content straight into the modal tag by using the html attribute:

Example: Show some inline text

{modal html="This text is entered right inside the modal tag." title="Hello!"}Show some inline text{/modal}

Using a separate Content Tag

To place entire content blocks inside a modal without the need of creating separate articles/urls, you can use the content attribute in combination with modalcontent tags.

You are completely free to place whatever custom content you want to open inside the modal.

All you need to do is choose an alias for the modalcontent tag and place that alias as value for the content attribute in the modal tag. In this example, our alias will be: mycontent.

By using the modalcontent tags, you can place entire content blocks into the modal without the need of creating separate articles/urls.

You are also completely free to place whatever style and type of content you want in here:

Lorem Ipsum

applesPellentesque habitant morbi tristiquesenectus et netus et malesuadafames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}

Example: A lot more inline content

{modalcontent mycontent}
... your fully styled content...
{/modalcontent}

{modal content="mycontent" title="Fully styled inline content"}A lot more inline content{/modal}

Note: The modalcontent tag can be placed anywhere on the page. You can also have multiple modal links opening the same modalcontent content.

Modules Pro only

You can also make a module open in a modal by using the inline Content Tag described above.

You will also need to use Modules Anywhere to accomplish this.

{modalcontent mymodule}
{module My Module}
{/modalcontent}

{modal content="mymodule"}Click here to open My Module{/modal}

Some modules that rely on scripts and external styles may not work using the inline method. In that case you might need to use the alternative method below:

Via a new article

An alternative way to open a module in a popup window, is to first create a new article and place the Modules Anywhere tag in that article, like: {module My Module}.

Then, simply link to that new article using Modals.

Some modules that rely on scripts and external styles may not work correctly. In that case you will need to use the iframe mode, by adding iframe="true" to the {modal} tag.

Galleries & Slideshows Pro only

The Pro version of Modals also allows you to a create and open a whole images gallery with arrow navigation.

You can achieve this by simply using a single modal tag with a gallery attribute holding the folder that contains your images.

Modals, by default, will automatically create and display thumbnail images as clickable links to the gallery. Also by default, the first image found in the folder in alphabetical order will be the first one to open in the gallery, as well as the only one shown in the content as a thumbnail.

Example:

{modal gallery="images/gallery"}{/modal}

Custom link (no thumbnail)

If you place anything between the modal tags, that will be used as link to open the gallery instead of a thumbnail. This can be text, or an image, or basically anything you want.

Example: Click here

{modal gallery="images/gallery"}Click here{/modal}

Different first image opened

If you want to have a different image open first, instead of the first in the gallery, add a first attribute to specify the desired image.

Example: Click here

{modal gallery="images/gallery" first="bananas.jpg"}Click here{/modal}

You also have the ability to show a random image as first, by setting the first attribute to random.

Example: Click here

{modal gallery="images/gallery" first="random"}Click here{/modal}

Different thumbnail

If you want to show a different image as a thumbnail, instead of the first in the gallery, add a thumbnail attribute to specify the desired image.

Example:

{modal gallery="images/gallery" thumbnail="strawberries.jpg"}{/modal}

You also have the ability to show a random image as a thumbnail, by setting the thumbnail attribute to random.

Example:

{modal gallery="images/gallery" thumbnail="random"}{/modal}

All thumbnails

If you want to show all thumbnails for all images included in the gallery (in alphabetical order):

Example:

{modal gallery="images/gallery" thumbnail="all"}{/modal}

You also have the ability to show all thumbnails in random order:

Example:

{modal gallery="images/gallery" thumbnail="all-random"}{/modal}

Range of thumbnails

You also have the ability to show a range of specific thumbnails, with the number of the first and last image you want to show. For example, to show only the first 4 thumbnails:

Example:

{modal gallery="images/gallery" thumbnail="1-4"}{/modal}

Slideshow

To make the gallery act like a slideshow that cycles through the images automatically, simply add slideshow="true" to the modal tag.

Example:

{modal gallery="images/gallery" slideshow="true"}{/modal}

Titles and Descriptions

By default Modals will convert the image name to a Title, and show it on top of the modal popup.

But you can override image titles and give them separate descriptions via a data.txt file which you place in the gallery folder.

Here is an example of a data.txt file showing you the different possibilities:

description=Base description for all images in the gallery
title_apples=My special title for Apples image
description_apples=Description specific for Apples image
title_bananas=My special title for Bananas image
description_bananas=Description specific for Bananas image

Filter Images

If you don't want all the images in the specified folder to show in the gallery, you can filter images by adding a filter attribute. This example only shows images from folder images/gallery that contain "berries":

Example:

{modal gallery="images/gallery" filter="berries"}{/modal}

The Filter attribute also supports Regular Expressions. For example, to only show images from folder images/staff that start with 'team-accountancy-' or 'team-finance-':

{modal gallery="images/staff" filter="^team-(accountancy|finance)-"}{/modal}

For more info on Regular Expressions: http://www.regular-expressions.info/reference.html

Custom Images

What if you want to create a gallery modal but your images are not all in the same folder? Modals also allows you to do this thanks to the "Grouping multiple modals" feature.

To create a gallery with your own specific images, create a modal tag for every image and then group the modals together by adding a group attribute to all modal tags.

Example:

{modal image="images/fruit/bananas_x.jpg" group="mygallery"}{/modal} {modal image="images/fruit/limes_x.jpg" group="mygallery"}{/modal} {modal image="images/fruit/strawberries_x.jpg" group="mygallery"}{/modal}

To create a slideshow on these custom galleries, you need to add slideshow="true" to every modal tag in the group.

Example:

{modal image="images/fruit/bananas_x.jpg" group="mygallery2" slideshow="true"}{/modal} {modal image="images/fruit/limes_x.jpg" group="mygallery2" slideshow="true"}{/modal} {modal image="images/fruit/strawberries_x.jpg" group="mygallery2" slideshow="true"}{/modal}

Grouping multiple modals Pro only

You can group different types of modals by adding a group attribute to multiple modal tags.

This will give you arrow navigation to the different links inside the modal popup.

  1. Internal url
  2. External url
  3. Inline content
  4. Image
  5. Video
{modal url="index.php?option=com_content&view=article&id=123" group="mygroup"}Internal url{/modal}
{modal url="https://goo.gl/5r5faj" group="mygroup"}External url{/modal}
{modal html="This text is entered right inside the modal tag." group="mygroup"}Inline content{/modal}
{modal image="images/fruit/bananas.jpg" group="mygroup"}Image{/modal}
{modal url="https://www.youtube.com/embed/tENZDoj5MTg" width="560" height="315" title="Learn all about What? Nothing!" group="mygroup"}Video{/modal}

Auto-close modal Pro only

You can make a modal window auto-close after a given amount of time using the autoclose attribute.

To make the modal close after the default amount of time set in the Modals plugin settings, simply add the autoclose="true" attribute:

Example

{modal url="my/url" autoclose="true"}...{/modal}

But you can also set a different time in milliseconds. So if you want to auto-close the modal after only 2 seconds, do:

Example

{modal url="my/url" autoclose="2000"}...{/modal}

As you can see in above examples, Modals shows a countdown bar (blue line) at the top of the modal popup.

If you don't want that countdown to show, you can switch of the Enable Countdown Bar setting in the Modals system plugin settings.

Open modal on pageload Pro only

To make modal popup on pageload, simply add the open="true" to the {modal} tag, like:

{modal url="my/url" open="true"}...{/modal}

If you do not want to show the actual modal link in the content of your page, then simply don't place any text between the {modal} tags, like:

{modal url="my/url" open="true"}{/modal}

The syntax for modal popup you can see on the demo page looks like:

{modal html="Yes, you can also make modal popups show on page load!" title="Welcome to the Modals Demo" open="true" autoclose="5000"}{/modal}

Show only once

To make a modal popup only show once, you can use open=once, like:

{modal html="This modal will only show once" open="once"}{/modal}

By default, Modals will keep track of the count via a site wide cookie. If you want this count to be based on the individual page visits, then you can change that in the Modals system plugin settings. You can also choose to base the count on the site wide session count instead.

Show on specific page loads

You can also tell Modals to show the modal on specific pageloads or a specified range of visits, using the open attributes. For instance, to show a modal on the second, third and fourth page load, you can do:

{modal html="This modal will show on visit 2, 3 and 4" open="2,3,4"}{/modal}

or:

{modal html="This modal will show on visit 2, 3 and 4" open="2-4"}{/modal}

If you want a modal to pop up on the first 5 visits and on visit 10, 15 and 20, you can do:

{modal html="This modal will show on visits, 1-5, 10, 15 and 20" open="1-5,10,15,20"}{/modal}

By default, Modals will keep track of the count via a site wide cookie. If you want this count to be based on the individual page visits, then you can change that in the Modals system plugin settings. You can also choose to base the count on the site wide session count instead.

Open with a delay

Maybe you want the modal popup to open after a few seconds.

No problem, Modals can do that too.

Simply add a delay attribute to the tag and give the time value in milliseconds.

So to open a modal popup 7.5 seconds after the page has loaded, do:

{modal url="my/url" open="true" delay="7500"}{/modal}

Open Menu Item in modal

To make a menu item open in a modal popup, simply surround the menu title in {modal} tags.

So if your menu item title is Click here!, change it to {modal}Click here!{/modal}.

You can also pass extra variables in the tag as described earlier, like: {modal title="My Page"}Click here!{/modal} or {modal width="600" height="400"}Click here!{/modal}.

If for some reason you don't want to use the {modal} tags (or it doesn't work), you can also give the menu item a custom class name (works with most menu modules) and set Modals up to convert by that class name.

Auto-Convert to Modals

In addition to manually creating modals with modal plugin tags, the Pro version of Modals also allows you to automatically open certain links or images in modal popups, thanks to the "Auto-Convert" options.

Links

aaaaa

Class Names

With the Pro version of Modals you can automatically open certain links in modal popups, by simply giving them one of your specified class names.

The default class name that will be auto-converted is modal, but you can change that in the Modals system plugin settings. You can even give a comma-separated list of class names which Modals should handle.

External Links Pro only

aaaa

Target Blank Pro only

aaa

Filetypes Pro only

aaaa

URL matches Pro only

You can set Modals up to make all links to certain urls open in modal popups.

You can find the URL matches options under the Convert Existing Links section in the Modals system plugin settings.

If you - for instance - want all links to pages containing the word shop to open in a modal popup, simply enter that in the URL matches field.

Or enter some-other-website.com/ to open all external links to some-other-website.com in your website.

For even more control, you can also create URL matching rules using Regular Expressions

Images Pro only

With the Pro version of Modals you can automatically convert certain images to modal popup links, by simply giving them one of your specified class names.

The default class name that will be auto-converted is modal, but you can change that in the Modals system plugin settings. You can even give a comma-separated list of class names which Modals should handle.

When auto-converting an image to a modal popup, Modals will automatically create and display a thumbnail as clickable link to the image.

Modals will also check if the image you set to auto-convert is already a thumbnail of an image, instead of the actual image. If so, Modals will still work as expected and will ouput the same result, with the thumbnail shown in the content (as clickable) and the large original image shown in the modal popup.

Thumbnail Images Pro only

The Pro version of Modals comes packed with a feature that automatically creates thumbnails, used as clickable links to open modal popups for Image Modals, Galleries & Slideshows and Auto-Converted Images (all Pro features).

This feature is enabled by default. If you disable it (via the Modals system plugin settings) Modals will fallback to displaying the large original image as clickable link to open the modal, unless you manually create a thumbnail for that image yourself.

Thumbnail Images options can be customized in the Modal system plugin settings:

Naming method

Modals offers two different naming methods for thumbnail images. You can choose the one you prefer:

  • Suffix: Thumbnails are created with your specified suffix added to the filename of the original image. By default, the thumbnail suffix is _t (so the thumbnail for image apples.jpg would be apples_t.jpg).
  • Folder: Thumbnails are placed inside a subfolder of the location of the original image, with the same filename of the original image. By default, the thumbnail folder is thumbnails (so the thumbnail for image gallery/apples.jpg would be gallery/thumbnails/apples.jpg).

Dimensions and quality

You can customize the width and height in pixels that Modals will use to generate thumbnails, as well decide whether you want the thumbnail images to be cropped or not. Default dimensions are set to 80x60.

With the "Crop" option enabled, all thumbnails will always have the set width and height, and will be cropped to fill the specified dimensions if proportions are different. With the option disabled, the thumbnails will be resized to the maximum width or height, maintaing its aspect ratio.

You can also set the compression quality of the automatically created thumbnails, with a value ranging from 0 (worst quality, smaller file) to 100 (best quality, biggest file). Default quality is set to 70.

Note: If you changed dimensions or quality settings and you need Modals to re-create the thumbnails, simply delete the thumbnail files and Modals will generate them again.

Custom thumbnails

As mentioned, thumbnails will be automatically generated with the "Create Thumbnails" feature enabled. Also, a thumbnail for an image will be generated only if it doesn't already exist (according to the specified suffix or folder) meaning that, if you manually create a thumbnail file for a certain image, Modals will not generate one in its place.

You can manually create your own custom thumbnails by simply uploading the files according to your naming method (with the specified suffix or folder). You can also overwrite an already generated thumbnail with your own created one, by simply replacing the file.

Note that your custom thumbnails (manually created) can be uploaded with any dimensions, and will be displayed with the custom dimensions you uploaded them with (they will not be resized).

Editor Button

You can enter the {modal} tags directly into your content. However, to save time typing and remembering what the exact syntax is, Modals also comes with a handy editor button.

You can use this editor button (located below the text input area) to place a {modal} tag with the desired attributes into your article (or other editor fields).

You can customize the default tag settings in the Modals system plugin settings.

Settings

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

Existing Links

Classnames

Auto-Convert If selected, all links with one of the given classnames will be converted to modal popup links.
Classnames A comma separated list of classnames. Links that have any of the defined classnames will be converted to modal popup links.

External Links Pro only

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

Target Blank Pro only

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

Filetypes Pro only

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 only

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 Url parts will be matched using regular expressions. So make sure the string uses valid regex syntax.

Images Pro only

Classnames

Auto-Convert If selected, all images with one of the given classnames will be converted to modal popup links.
Classnames A comma separated list of classnames. Images that have any of the defined classnames 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.

Default Settings

These are options that can be overridden inside the {modal} tag like you can see in above examples.

So the syntax for overruling settings in the {modal} tag is:

{modal url="my/url" setting_name="setting_value" setting_name="setting_value"}...{/modal}

The settings marked with a * can be set to a different default value in the Modals system plugin settings.

The Free version ONLY allows these settings: url, title, width, height, iframe.

NameDefault valueDescription
url / href The url or element to open in the modal. You do not have to use the setting name in the {modal} tag if the url is defined as first parameter. So these all work:
{modal my/url}...{/modal}
{modal url="my/url"}...{/modal}
{modal href="/my/url"}...{/modal}
content The id of the content (set by the {modalcontent} tag) to open in the modal:
{modal content="mycontent"}...{/modal}
{modalcontent mycontent}This text appears inside the modal!{/modalcontent}
html For displaying a string of HTML or text:
{modal html="This text appears inside the modal!"}...{/modal}
title This can be used as an anchor title alternative for the modal.
className Adds a given class to the modal and the overlay.
iframe false If true, specifies that content should be displayed in an iFrame. For external urls this is automatically set to true.
photo false 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')
scrolling true If false, the modal will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of the modal.
open true If true, the modal will immediately open on pageload.
transition * elastic The transition type. Can be set to "elastic"or "none".
speed * 350 Sets the speed of elastic transitions, in milliseconds.
scalePhotos * true If true, and if maxWidth, maxHeight, width, or height have been defined, the modal will scale photos to fit within the those values.
returnFocus * true If true, focus will be returned when the modal exits to the element it was launched from.
fastIframe * true If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
opacity * 0.8 The overlay opacity level. Range: 0 to 1.
overlayClose * true If false, disables closing the modal by clicking on the background overlay.
closeButton * true If false, removes the close button.
escKey * true If false, will disable closing the modal on 'esc' key press.
arrowKey * true If false, will disable the left and right arrow keys from navigating between the items in a group.
Dimensions
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%).
externalWidth * Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%).
externalHeight * Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%)./td>
initialWidth * 600 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
initialHeight * 450 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
maxWidth * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
maxHeight * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
Positioning
fixed * false 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 * true Repositions the modal if the window's resize event is fired.
top * Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
bottom * Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
left * Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
right * Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
Groups / Slideshows
group / gallery This allows the user to group any combination of elements together for a gallery.
preloading * true Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
loop * true If false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshow * false If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed * 2500 Sets the speed of the slideshow, in milliseconds.
slideshowAuto * true If true, the slideshow will automatically start to play.
Auto-Gallery
showall * false If selected, all thumbnails in the given gallery folder will be automatically shown.
thumbSuffix * _t The suffix to identify the thumbnail to show as the link. Example with default value '_t': if the main image is 'apple.jpg', then the thumbnail image is 'apple_t.jpg'.
thumbWidth * Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
thumbHeight * Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
separator * (space) Set the separator html for the images in the gallery. By default this is a space. Enter {none} to have no spacing between images.
filter * \.(png|jpg|gif|eps) The filter (Regular Expression) used to find the image files in the given gallery folder.
Retina Images
retinaImage * false If true, the modal will scale down the current photo to match the screen's pixel ratio
retinaUrl * false If true and the device has a high resolution display, the modal will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix * @2x.$1 If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change 'my-photo.jpg' to ''

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.

Advanced Settings

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: {...}, [...], {{...}}, [[...]], [:...:], [%...%]
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 If selected, modals will be opened as iframe by default. This excludes links lo media files.
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.
Exclude URLs A comma separated list of (part of) URLs to exclude.
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.
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 openOnce, openMin and openMax attributes.

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.
Max Width Mobiles The maximum width in pixels for which to disable Modals.
Disable Pageload Popups on Mobile Select to disable modal popups entirely for modals set to open on pageload.
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.
FAQs:

The {modal} tags are not being converted

The Modals plugin is not published

Check if the Modals plugin is published. Go to Extensions >> Plugin manager and search for the system plugin System - Regular Labs - Modals. Then publish it.

There is markup on the {modal} tags

If you have copy/pasted code directly into your editor, you might also have copied along hidden HTML tags. So this will also cause the {modal} tags to break:

{<span>modal</span> ...}

Remove the extra styling or other html tags around and in the {modal} tags that might cause problems.

The modal redirects to a white page with an email address

This is caused by the Joomla core "Content - Email Cloaking" plugin.

I recommend you use Email Protector instead, or disable the core plugin.

The modal does not have the correct styling

Modals uses the sub-template modal by default (which you can change in the Modals plugin settings).

This means that Modals will tell Joomla to show the page using the modal template view.
Joomla will look in your templates folder for a modal.php file, and if there is none, it will use the modal.php file from the system template.

If you want to customize this sub-template, you can copy that modal.php file to your templates folder, or copy your templates component.php (if available) and name it to modal.php.
Then you can change it to how you want, like adding stylesheets.

The page in the modal window won't load

This could have a few reasons:

  • The url is not correct. Double check if the url loads the page when placed directly in your browser.
  • You are linking to an external site which doesn't allow you to open it inside your site. Some (usually larger) sites have a protection script which prevents it from being opened inside iframes in other sites. Sites like Google, Youtube, Facebook. See if they offer an 'embed' url for the page you are trying to link to.
  • You are trying to open a non-SSL url in an SSL site. If you are running your page in HTTPS mode (SSL), you cannot open any HTTP (non-SSL) pages with Modals. This is a protection on browser level.
Free vs Pro:

Create modal links anywhere::Modals gives you the power to create modal popup links anywhere you can enter text. So also in modules.
Different modal styles::You have to possibility to choose from different modal styles. You can choose the one that best fits your websites style.
Image & video popups::Make your images, videos and other media urls popup in a modal window.
Convert links by
Modal tag::Use a quick and easy modal tag anywhere in your content to create modal links. You can even use these to convert your menu items to modal links (with most menu modules).
Classname::Give links a user-defined classname and Modals will create a modal link from it.

Galleries & slideshows::Create complete galleries with just 1 tag. Add slideshow functionality to your galleries
Auto-Images::Automatically open images in modals simply by adding a classname
Inline content::Create modal popups with content that is in your article. You do not need to create separate articles/urls. This is especially useful for short pieces of text.
Easy articles and videos::Easily open articles in modal popups with the article attribute and Youtube/Vimeo videos with youtube / vimeo attributes (and adding the relevant id)
Group links::Group any modal links (via the modal tag) on your page, so you can use the modal navigation to go to the next/previous link.
Open on pageload::Make Splash page modal popups that will show when you first load the page.
Auto-close::Make a modal close after an x amount of seconds
Convert links by
Modal tag::Use a quick and easy modal tag anywhere in your content to create modal links. You can even use these to convert your menu items to modal links (with most menu modules).
Classname::Give links a user-defined classname and Modals will create a modal link from it.
External Links::Let Modals open all external links in modal popups.
Target blank::Let Modals convert all links with a target=_blank to modal links.
Filetypes::Want to make all pdfs open in modal links? No problem with Modals. Or any other file types for that matter.
URLs::Specify certain urls to always open in modals. You can also use the powerful Regular Expressions to define urls.

Examples:

You can find a multitude of examples on the dedicated Modals Demo Page.

Visit the Demo Page >>>

Modals is a Joomla plugin extension to help you create cool modal popup, like this!

You can make modal popups for texts, articles, other internal pages, external pages, images, videos, galleries , whatever you want.

Modal popup windows are fancy popup boxes also known as lightboxes.

Full control

Modals is packed with options to control the modal popups.

  • Full control over styling (via some styling options and CSS)
  • Define dimensions
  • Create image popups quickly and easily
  • Make galleries and slideshows automatically Pro only
  • Make popups open on pageload Pro only
  • And many more...

Activators

There are several ways Modals can covert links:

  • Via the special Modal tags {modal ...}...{/modal}
  • By class names (all links with defined class names)
  • All external links Pro only
  • By target="_blank" (all links with a target. Internal and/or external) Pro only
  • By filetypes (all links to given filetypes) Pro only
  • By url (also supports regular expressions) Pro only

Colorbox

Modals utilizes the fabulous modal script Colorbox by Jack Moore. Kudos to him!