In this video we’ll take a look at what the free version of Modals is and how you can use it in your Joomla website.

With Modals you can easily create cool modal popups on your site, like this!

These modal popup windows are also known as Lightboxes.

With the Free version, we can create Modals for any URL, article, image or video. The Pro Version extends the possibilities even more, allowing us to create full Image Galleries, automatically convert existing links and images to modal popups, and more.

For now, we’ll take a look at the basics of the Free version of Modals. We will get into the Pro version in the next video.

We place Modals by using - what we call - a plugin tag. We can place Modals anywhere we can enter text, so in articles, modules, anywhere we want.

As you will find out, Modals is a powerful and versatile tool.

To use Modals we will - of course - need to install it first. You can view the Modals installation video to see how to install it.

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

Simple modal

Let’s start with a simple example. We are in an article about “Animals”. Let’s say that in this article we want to insert a modal popup that opens the ‘Cats’ article.

All we need to do is place a {modal} plugin tag in the editor, using curly braces. And close it with a closing {/modal} tag, like this.

{modal}{/modal}

Then inside this opening tag, we add a URL attribute to tell Modals what URL we want it to open.

{modal url=""}{/modal}

So we copy and paste the URL of our desired page and insert it here. Seeing this is an internal link, we don’t need to include the domain name in the url.

{modal url="index.php/8-animals/2-cats"}{/modal}

Between the plugin tags, we place the text that we want to use as a clickable link to open the modal popup. The text can be anything we want. For example, something like “Click here!”.

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

When we now view this “Animal” article on the frontend, we now have our clickable link. When we click it, our “Cats” article is opened in a nice Modal popup!

This bit of the link doesn’t have to be text. It can be pretty much anything you want, like an image. So we just select this and insert an image via the editor. Let’s use this small cats image we have stored on our server (images/animals/small/cats.jpg).

Ok, so we now have an image we can click on to open an article!

Just like with internal URLs, we can also open an external URL in a Modal. Simply place the external URL in the tag. Let’s try with a Wikipedia page. And we’ll switch back to the “Click here” text for the link.

{modal url="https://en.wikipedia.org/wiki/Cat"}Click here{/modal}

Here is how the modal for our external link looks in the frontend.

We can customize the dimensions of the Modal window by adding width and height attributes in the tag. They can be either expressed in pixels or a percentage value. For example, let’s say we want our Modal to be 500 by 500 pixels:

{modal url="https://en.wikipedia.org/wiki/Cat" width="500" height="500"}Click here{/modal}

Now our Modal has our custom dimensions. Don’t worry about your dimensions being too big for mobile devices.

Modals is responsive, meaning that modal popups will automatically adapt to the device width or browser window.

We can also add a Title to our Modal. This title will show at the top of the modal popup. Let’s try, by simply adding a title attribute to the tag.

{modal url="https://en.wikipedia.org/wiki/Cat" title="Wikipedia on Cats"}Click here{/modal}

And here is our Modal with a nice looking title at the top.

Image & Video modals

We can, of course, also open images directly in a Modal popup. Again, we do this by simply inserting the URL to our image:

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

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

But we can customize it with the title attribute we’ve seen earlier.

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

The Pro version of Modals has the ability to display a thumbnail as a clickable link to the image modal, we’ll take a look at that in the next video.

Speaking of videos, let’s take a look at how we can embed a Youtube or a Vimeo video in a Modal popup. It’s very simple. You guessed it! By simply inserting the URL to the video.

{modal url="https://www.youtube.com/watch?v=vBNMo4YCKl0"}Click here{/modal}

And we’ll give it a title too.

{modal url="https://www.youtube.com/watch?v=vBNMo4YCKl0" title=”Fred the Cat”}Click here{/modal}

Here is our video in a Modal popup.

Editor button

As you can see, we can simply enter the Text for the link and the URL in here and it will generate the modal code for us.

We can also input extra settings like the Title, Width, Height and more.

Convert links by class name

In addition to manually creating modals with modal plugin tags, Modals also allows us to automatically open certain links thanks to the "Auto-Convert" options in the Modals plugin settings.

By enabling this option, all links with one of the given class names will be converted to modal popups. The default class here is set to “modal”.

The Free version of Modals only supports converting links by class names. There are a lot more features exclusive to the Pro version, which we will discuss in the next video.

So by giving an existing link a class="modal" attribute, it will be opened in a modal instead of loading a new page. We’ll just switch to the html view to create a link.

<a class="modal" href="/index.php/8-animals/3-dogs">Read more on dogs...</a>

Here is our link. As you can see, it automatically opens in a Modal popup.

Menu item into modal

With Modals, we can also make a menu item open in a modal popup. For example, let’s say we want our Log-in menu item to be a modal.

To do this, we simply surround our Menu Title with {modal} tags:

{modal}Login{/modal}

We can also add extra attributes as we’ve seen before. For example a title:

{modal title="Insert username and password"}Login{/modal}

Now, when we click on our Menu Item in the front-end, it will open up in a Modal popup instead of opening in a new page. Nice, isn’t it?

Pro version

In the next video, we will get into all the amazing stuff we can do with Modals Pro, like inline content, galleries, opening modals on page load, auto-closing modals, opening modules in modals, and much more.

Recap

So just to recap.

We have seen how easy it is to create a Modal and customize its appearance.

We have learned how to create a Modal for images and videos and how to use the Modals editor button to help us along.

And we’ve seen how to open a Menu Item in a modal, and how to automatically convert an existing link to a Modal.

And we’re now excited to see what the Pro version can do!

Let’s head over to the next video that will cover the Pro version. Or, if you need, first watch the installation video to see how easy it is to get Modals installed.