Introduction

In this video we'll take a look at the Pro version of Modals. In the previous video we looked at the basics of the Free version and how to insert modal popups, also known as Lightboxes, by simply using {modal} tags.

We have already seen how we can create Modal popups for any URL, including articles, images and videos.

The Pro Version extends the possibilities even more, allowing us to insert inline content, image galleries, open modals on page load or auto-close them, and much more.

So, let's take a closer look at the exciting features that the Pro version has to offer!

In this video we will be working with the latest version of Modals Pro, which is version 11.0.0. And what you see here is a Joomla 3.9.0 setup. If you are using newer versions, things might look a bit different.

Quick links

One of the nice perks of the Pro version is the ability to create modals for articles, images and videos in a much easier and faster way.

First, we'll just remove this text here to make it clearer what we are working on.

With the Free version we are required to manually insert in the {modal tag} the URL that we want to open in a popup...

{modal url="index.php/8-animals/2-cats"}Click here to read more...{/modal}

And the result is that the Cats article shows up in the modal popup window.

But with Modals Pro - instead on using this url - we can use an "article" attribute and simply insert the title of the desired article we want to open.

{modal article="Cats"}Click here to read more...{/modal}

Or even better, we can use the Editor Button to generate this code for us.

This allows us to select an article from the list of articles in our website. And we place the clickable text for the link here.
As you can see, the generated code is the same.

And the result is the same as before, the Cats article is shown in the modal.

{modal url="images/animals/cats.jpg"}Click here{/modal}

In the previous video we also looked into opening images in modal popups. With Modals Pro, images also have their special attribute that can be used.

{modal image="images/animals/cats.jpg"}{/modal}

We still need to keep the image URL here. But when using the "image" attribute - instead of the "url" attribute - Modals will show a thumbnail of the image as the clickable link. To make that happen we should also not place any text between these modal tags.

Here is the result on the website. Instead of text, we now have a nice looking thumbnail of the cats image, and when clicked it opens up the modal popup with the full-sized image.

The Editor Button becomes even more handy for images. Instead of having to manually insert the URL of the image, we can simply select an image via the built-in media browser.

If we want, we can even specify the width and height for the generated thumbnail of the image. Otherwise, it will use the dimensions specified in the Modals Plugin Settings.

You can now see the thumbnail is a different size, but it still opens the full image.

We also have a Video tab that allows us to quickly paste the Youtube or Vimeo link or ID to create a modal popup that opens a video.

As we can see, the youtube attribute now only contains the ID of the video. So we don't have to worry about what url to use here. Modals will figure that out for us.

Inline Content & Modules

Great, we've seen how we can create modal popups for all sorts of pages and external content. But what if we wanted to create a modal for simple text without needing a separate article?

We can do this in two different ways:

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

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

Here is the result.

For more advanced text, such as entire content blocks, we can use the "content" attribute in combination with a special "modalcontent" tag.

We simply insert our custom content inside {modalcontent} tags and assign an alias to the tag, such as "mytext".

{modalcontent mytext}
...
{/modalcontent}

We then create our "modal" tag with a content attribute that has that alias "mytext" as the value, to tell the tag that we want to show the custom text placed inside the "modalcontent" tag that has the alias "mytext".

{modal content="mytext"}A lot more inline content{/modal}
{modalcontent mytext}
[...our fully styled content...]
{/modalcontent}

It doesn't matter where on the page you place this "modalcontent" block. As long as it is somewhere on the same page as the {modal} tag.

If this looks too complicated to do manually, we can achieve the same effect thanks to the Editor Button. All we have to do is insert the content we want to open in the modal popup, and the code will be automatically generated.

And here is the result on the website.

This can be useful also to insert Modules in a modal popup.

Joomla allows to embed a Module in content thanks to the core "Load Modules plugin".

Or the same can be done also with another Regular Labs extension, "Modules Anywhere".

That means that we can add a module code between the {modalcontent} tags, and that will make the module open in a popup.
Let's try opening up the Login Form module...

{modalcontent login-popup}
{module Login Form}
{/modalcontent}
{modal content="login-popup"}Click here to log in{/modal}

And here is the result on the website.

Galleries & Slideshows

The Pro version of Modals also allows us to a create and open a full-blown images gallery with arrow navigation.

We can achieve this by simply using a single {modal} tag with a "gallery" attribute holding the folder that contains our images.

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

And here it is, a full lightbox image gallery with incredible ease.

By default, all the images found in the specified folder will be displayed in the modal gallery in alphabetical order, [close modal and point out the thumbnail] and the first image found will be shown in the content as a thumbnail.

If we want to show thumbnails for all images instead of just one, we do so by adding a "thumbnails" attribute with the value "all".

{modal gallery="images/animals" thumbnails="all"}{/modal}

Here are all our thumbnails, with each opening the respective image of the gallery.

To make things easier, we can take advantage of the Editor Button in this instance as well. We can specify the width and height for the generated thumbnails, and we can even set the Gallery to act as a Slideshow, meaning it will automatically cycle through the images.

This is just a small taste of what we can do with Modals Galleries. We have several options to filter which images we want to show, both in the modal popup and as thumbnails. All the available features can be found in the documentation.

Auto-Convert features

As we have seen in the previous video, Modals also allows us to automatically open certain links thanks to the "Auto-Convert" options in the Modals plugin settings.

In addition to converting by class names, which is available in the Free version, with the Pro version of Modals we can also decide to convert all external links, all links that have a target="_blank" property, as well as links pointing to certain filetypes or URLs.

We can also automatically convert to modal popups all images with a given class name. The default class name is set to "modal".

So we'll just insert this cats image right here.

First we'll resize it to a thumbnail size we would like on the frontend. Now, we still need to give it a "modal" class. That's easiest to do in this html view.

<p><img class="modal" src="/images/animals/cats.jpg" alt="Cats" width="???" height="???" /></p>

And let's change these dimensions to make it like a little banner. Say 400 by 100 pixels.

<p><img class="modal" src="/images/animals/cats.jpg" alt="Cats" width="400" height="100" /></p>

Now don't worry about the image being stretched here.

The image has now automagically become a resized thumbnail, cropped to our specified dimensions. That's because Modals actually creates resized images for our thumbnails. And clicking on it, expands the original large image in a modal popup. How cool is that?

Open on pageload

The Pro version of Modals also allows us to open modal popups that will show when we first load the page. Either immediately or with a delay.

To make a modal popup show immediately, simply add the open="true" attribute to the {modal} tag. And If you do not want to show the actual modal link in the content of the page, then simply don't place any text between the {modal} tags.

{modal article="Cats" open="true"}{/modal}

When we refresh the page on our website, we can see that now the Modal popup opens automatically as the page loads.

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. Let's do 5 seconds.

{modal article="Cats" open="true" delay=”5000”}{/modal}

1,2 3,4 5 there it is, after 5 seconds.

We have even more options at our disposal, such as the ability to show the Modal popup only once per user, or on specific page loads. Check out the documentation for more details.

Auto-Close

Just as we can open a modal popup after a certain amount of seconds, we can also decide to close it after a certain amount of seconds.

To make the modal close after a default time of 5 seconds, simply add an autoclose="true" attribute.

{modal article="Cats" open="true" autoclose="true"}{/modal}

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

{modal article="Cats" open="true" autoclose="7500"}{/modal}

As we can see, now Modals shows a countdown bar at the top of the modal popup that indicates the time before the modal will close. The countdown bar can be turned off if desired.

Positioning

But we'll take it a step further. We can also adjust the position of the modal!

Let's change this modal to display a simple message, like "Get 20% discount today!". We'll make it link to our imaginary shop. [Just add a link to url 'shop'] And we'll remove the auto-close.

{modal html="Get 20% discount today!" open="true"}{/modal}

Now we'll place the modal to the bottom right. And let's have it 20 pixels from the edge of the window. You can of course also use the left and top attributes if you want it positioned somewhere else.

{modal html="Get 20% discount today!" open="true" bottom="20" right="20"}{/modal}

So that is looking ok. But this black overlay is blocking the rest of the website. So let's remove that.

We can do that by simply setting overlay to false.

{modal html="Get 20% discount today!" open="true" bottom="20" right="20" overlay="false"}{/modal}

And now we have a non-intrusive little message that the user can click away if they want.

Recap

So just to recap.

We have seen how we can easily create modal popups for Articles, Images, Videos, Inline Content and Modules, both by manual typing and using the editor button to help us along.

We discussed how we can create a full Modal Image Gallery, with thumbnails and navigation.

We can automatically convert an existing image to a modal popup.

We looked into automatically opening a modal on pageload and closing it after a certain amount of seconds.

And finally we have played around with positioning of the modal.

There are a lot more cool features to explore in Modals. Head over to the tutorial section to find more treasures.
Or stay tuned for other videos that look more in depth at specific functionalities.

In the next video we'll walk through all the settings which help you control how Modals works.