Menu

Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

How to Create a Modal Window in Your Joomla Website

How to Create a Modal Window in Your Joomla Website


In this tutorial, we'll explain what a modal window is and how to implement one in your Joomla site.

Everyone hated (and probably still hates) the popup windows that took control of your workflow and commanded you to take some action, even if you didn't want to. This, after all, is the job of a modal window. However, with the development of better web workflows and the implementation of a popup window that has darkened backgrounds for clarity along with the ability to close the window by clicking anywhere outside of it, the lightbox began to bring modal windows back to the forefront of usability.

A popup, or modal window, is simply a JavaScript "child window" that appears on top of the main browser window when a link is clicked or some other action occurs. The most popular way to use these now is by putting an elegantly designed photo display into them, or even entire galleries. Alerts and messages are also less intrusive with the new style of modal windows.

In Joomla, there are a couple of ways to implement modal windows. One is to place a small snippet of code in your template's main file and then reference a modal class in your hyperlinks. This isn't difficult, but it's not always a straightforward business telling people exactly which file to place code into when the file structures of Joomla templates can vary so widely.

The second way to implement modal windows in Joomla is by installing an extension. The extension we'll be looking at is called Modalizer, and it's from NoNumber, the creator of several Joomla extensions, such as Modules Anywhere, ReReplacer and Sourcerer.

Listed in the "Frontend Coolness" section of their website, NoNumber offers the extension for free, but also has an upgraded version with extra features and support. When used sparingly and with a lot of thought, modal windows can indeed provide some coolness to the frontend of your Joomla site.

 

 

Here’s how it works:

Go to NoNumber's website and download the extension.

Install it into your Joomla site as normal, and then adjust any settings you might need by going into the plugin and making changes there.

 

 

One such necessary change might be to disable the loading of jQuery if you are already loading that library from your template or another extension. Modalizer also provides the option of using the Joomla core modal window, which utilizes the MooTools menu if you find that you can't get jQuery to work properly. There are several Modal Types that you can experiment with as well as many different types of behaviors and styles, some of which are available only in the paid version.

 

 

Prepare the content you would like to use inside the modal window, such as uploading an image or creating another article and saving its URL.

Create your article and insert all of your content as normal. You could also do the same with a module if you'd like to place it in another template position outside of the template's main content area.

Enter the following code (without spaces before and after the curly braces) where you would like your link to be:

{ modal url=your link here }Click here{ /modal }


Replace "your link here" with either the path to the actual image you uploaded, your article or even some third party information.
Check the documentation for many other features that you can add to the syntax to enhance the modal window’s behavior.

Modalizer makes it easy to provide popup links for images, articles, Google maps and nearly anything else on the web.

The final step is to publish your article or module and check the front end.

As mentioned, the basic version of Modalizer is free, but there is a commercial version available for €30 that provides more modal types, enhanced link conversion and greater support.

For more information, visit NoNumber.nl.

How do you feel about modal windows?  Love them?  Hate them?  
What would you put into a modal window and why?
We'd love to read your comments below.

Rate this blog entry:
Minimal Skins Releases Ultra Minimalist One Page T...
Beat the Recession - JCK Editor On Sale Now
 

Comments 4

Smith Warnes on Tuesday, 25 September 2012 15:30

Modal windows are a great replacement for the pop ups as they are really hated by many. Using modal windows seems a much convenient idea and implementing it so easy as explained in your tutorial. Great post, Thanks.

0
Modal windows are a great replacement for the pop ups as they are really hated by many. Using modal windows seems a much convenient idea and implementing it so easy as explained in your tutorial. Great post, Thanks.
Frank Ugochukwu on Friday, 16 August 2013 17:08

fantastic idea I didn't know about this time to get busy. thanks for the info

0
fantastic idea I didn't know about this time to get busy. thanks for the info
Guest - Ronak Parmar on Monday, 14 July 2014 20:59

Thanks for the screen shot which demonstrat how to display popup windows.
but if i want to generate popup window, onChange of drop down then how can i implement it?
please help me.

0
Thanks for the screen shot which demonstrat how to display popup windows. but if i want to generate popup window, onChange of drop down then how can i implement it? please help me.
Richard Pearce on Wednesday, 16 July 2014 16:32

That's a pretty specific requirement and probably something you'll need to get coded by a programmer.

0
That's a pretty specific requirement and probably something you'll need to get coded by a programmer.

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started