How to build Modal Login for Joomla

In some cases, you'll want to load the login module into a modal window instead of redirecting it to a new page. This simple approach is the trick to retaining users because it saves them a little time.

Currently Joomla has a login module available, but you cannot "hide it", it must always be displayed somewhere on your site.

This article will show you how to create a Modal Login with the help of Modal & Popup plugin.

Note: This article was made on Joomla 3, but you can still apply it on Joomla 4. Let's get started!

Basically, this process will include 4 steps:

  • Download and install Modal and Popup plugin.
  • Create login module.
  • Create Custom content module.
  • Link menu to modal windows.

Step 1:

First, you need to download and install the Modal & Popup plugin. See detailed instructions here.

Note: Remember to enable it after installation

Enable modal popup plugin


Step 2:

Next, you go to Module Management.

  • In Joomla 3: Extensions > Modules
  • In Joomla 4: System > Site Modules


Click "New" to create a new module, select "Login" type to continue:

Create joomla login module

You don't need to change the default settings, just enter a title for the module and it is important to set the value of "Module Assignment" to "On all pages".

Save the module and remember its ID number [1].

Get joomla module's ID


Step 3:

Next, you create a new module, but this time instead of choosing "Login", choose "Custom"

Create joomla custom module

At the editor, you enter:

{modal open="0" trigger=".loginModal"}
	{loadmoduleid xxx}

Replace "xxx" with the ID of the login module at [1]

Then, on this page, you switch to the Options tab, and set Prepare Content to Yes.

Enable prepare content module

Then select the location and page where you want to use the Login Modal.

At this step, there is a note that you have to activate the plugin: Content - Load Modules


Step 4:

Create a menu or a link to open this Modal.

If you want to create a menu, go to Menus > Main Menu > Add New Menu Item.

At Menu Item Type > Select > System Links > URL

Enter the value for the Link field as "#".

Next, switch to the Link Type tab, at the field "Link Class", and enter "loginModal".

Add class for joomla menu


If you want to create a button or link, you can use the below code to open Modal Login.

<a href="#" class="loginModal">Login</a>
<button type="button" class="loginModal">Login</button>

Watch the detailed video tutorial:



Please share if you liked this article! 

You may also like

How to upload and attach files to Joomla articles

K2 to Content Migration

File Manager Extension for Joomla

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.

Powered By JLex Comment.