(prononcez web honnête) Ukraine Support
EN

Modal login

mod_login
Overrides - - - Hits: 1156

This Joomla 4 override, created by Titus v. Kraft, allows you to display the login module in a modal. At the bottom of this article, you can download the files of the override.

Instructions
With Joomla and Bootstrap 5:

  • Copy the 'mod_login' folder into the 'html' folder of your template.
  • Create 2 modules of type 'mod_login' / 'Login Module.'
  • In the first module, under the 'Advanced' tab, set the layout to 'modul-opener' and assign it a position (Cassiopeia: search).
  • In the second module, under the 'Advanced' tab, set the layout to 'modul-content' and assign it a hidden module position (Cassiopeia: debug).
  • Create a child template from Cassiopeia and copy the 'index.php' into it, then add the following instruction after line 17: \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
  • If you are using a different template, please don't forget to add this instruction to the 'index.php' there as well.

Alternative with the Modals plugin from Regular Labs:

  • Alternatively, you can set the layout to 'modal-regularlabs' in a single 'Login' module. In this case, you don't need a child template, but you will need to install the 'modals' extension from Regular Labs."

Joomla 4 frontend rendering

Modal login- Joomla 4 override

PhP markup

The modal opener button

<?php

/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 * @Author		Titus v. Kraft
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$loginText = JText::_('MOD_LOGIN');

?>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#flc_login_content">
	<span class="fa fa-key"></span>&nbsp;&nbsp;<?php echo $loginText; ?>
</button>

The modal content

<?php

/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 * @Author		Titus v. Kraft
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Plugin\PluginHelper;
use Joomla\CMS\Router\Route;

$app->getDocument()->getWebAssetManager()
    ->useScript('core')
    ->useScript('keepalive')
    ->useScript('field.passwordview');

Text::script('JSHOWPASSWORD');
Text::script('JHIDEPASSWORD');

$loginText = JText::_('MOD_LOGIN');

?>

<div class="modal fade" id="flc_login_content" tabindex="-1" aria-labelledby="flc_login_contentLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="flc_login_content"><?php echo $loginText; ?></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="login-form-<?php echo $module->id; ?>" class="mod-login" action="<?php echo Route::_('index.php', true); ?>" method="post">
            <?php if ($params->get('pretext')) : ?>
                <div class="mod-login__pretext pretext">
                    <p><?php echo $params->get('pretext'); ?></p>
                </div>
            <?php endif; ?>

            <div class="mod-login__userdata userdata">
                <div class="mod-login__username form-group">
                    <?php if (!$params->get('usetext', 0)) : ?>
                        <div class="input-group">
                            <input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
                            <label for="modlgn-username-<?php echo $module->id; ?>" class="visually-hidden"><?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
                            <span class="input-group-text" title="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
                                <span class="icon-user icon-fw" aria-hidden="true"></span>
                            </span>
                        </div>
                    <?php else : ?>
                        <label for="modlgn-username-<?php echo $module->id; ?>"><?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
                        <input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
                    <?php endif; ?>
                </div>

                <div class="mod-login__password form-group">
                    <?php if (!$params->get('usetext', 0)) : ?>
                        <div class="input-group">
                            <input id="modlgn-passwd-<?php echo $module->id; ?>" type="password" name="password" autocomplete="current-password" class="form-control" placeholder="<?php echo Text::_('JGLOBAL_PASSWORD'); ?>">
                            <label for="modlgn-passwd-<?php echo $module->id; ?>" class="visually-hidden"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
                            <button type="button" class="btn btn-secondary input-password-toggle">
                                <span class="icon-eye icon-fw" aria-hidden="true"></span>
                                <span class="visually-hidden"><?php echo Text::_('JSHOWPASSWORD'); ?></span>
                            </button>
                        </div>
                    <?php else : ?>
                        <label for="modlgn-passwd-<?php echo $module->id; ?>"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
                        <input id="modlgn-passwd-<?php echo $module->id; ?>" type="password" name="password" autocomplete="current-password" class="form-control" placeholder="<?php echo Text::_('JGLOBAL_PASSWORD'); ?>">
                    <?php endif; ?>
                </div>

                <?php if (PluginHelper::isEnabled('system', 'remember')) : ?>
                    <div class="mod-login__remember form-group">
                        <div id="form-login-remember-<?php echo $module->id; ?>" class="form-check">
                            <input type="checkbox" name="remember" class="form-check-input" value="yes" id="form-login-input-remember-<?php echo $module->id; ?>">
                            <label class="form-check-label" for="form-login-input-remember-<?php echo $module->id; ?>">
                                <?php echo Text::_('MOD_LOGIN_REMEMBER_ME'); ?>
                            </label>
                        </div>
                    </div>
                <?php endif; ?>

                <?php foreach ($extraButtons as $button) :
                    $dataAttributeKeys = array_filter(array_keys($button), function ($key) {
                        return substr($key, 0, 5) == 'data-';
                    });
                    ?>
                    <div class="mod-login__submit form-group">
                        <button type="button"
                                class="btn btn-secondary w-100 <?php echo $button['class'] ?? '' ?>"
                                <?php foreach ($dataAttributeKeys as $key) : ?>
                                    <?php echo $key ?>="<?php echo $button[$key] ?>"
                                <?php endforeach; ?>
                                <?php if ($button['onclick']) : ?>
                                onclick="<?php echo $button['onclick'] ?>"
                                <?php endif; ?>
                                title="<?php echo Text::_($button['label']) ?>"
                                id="<?php echo $button['id'] ?>"
                                >
                            <?php if (!empty($button['icon'])) : ?>
                                <span class="<?php echo $button['icon'] ?>"></span>
                            <?php elseif (!empty($button['image'])) : ?>
                                <?php echo $button['image']; ?>
                            <?php elseif (!empty($button['svg'])) : ?>
                                <?php echo $button['svg']; ?>
                            <?php endif; ?>
                            <?php echo Text::_($button['label']) ?>
                        </button>
                    </div>
                <?php endforeach; ?>

                <div class="mod-login__submit form-group">
                    <button type="submit" name="Submit" class="btn btn-primary w-100"><?php echo Text::_('JLOGIN'); ?></button>
                </div>

                <?php
                    $usersConfig = ComponentHelper::getParams('com_users'); ?>
                    <ul class="mod-login__options list-unstyled">
                        <li>
                            <a href="<?php echo Route::_('index.php?option=com_users&view=reset'); ?>">
                            <?php echo Text::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
                        </li>
                        <li>
                            <a href="<?php echo Route::_('index.php?option=com_users&view=remind'); ?>">
                            <?php echo Text::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
                        </li>
                        <?php if ($usersConfig->get('allowUserRegistration')) : ?>
                        <li>
                            <a href="<?php echo Route::_($registerLink); ?>">
                            <?php echo Text::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-register" aria-hidden="true"></span></a>
                        </li>
                        <?php endif; ?>
                    </ul>
                <input type="hidden" name="option" value="com_users">
                <input type="hidden" name="task" value="user.login">
                <input type="hidden" name="return" value="<?php echo $return; ?>">
                <?php echo HTMLHelper::_('form.token'); ?>
            </div>
            <?php if ($params->get('posttext')) : ?>
                <div class="mod-login__posttext posttext">
                    <p><?php echo $params->get('posttext'); ?></p>
                </div>
            <?php endif; ?>
        </form>
      </div>
    </div>
  </div>
</div>

The modal Regular lab option

<?php

/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 * @Author		Titus v. Kraft
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Plugin\PluginHelper;
use Joomla\CMS\Router\Route;

$app->getDocument()->getWebAssetManager()
    ->useScript('core')
    ->useScript('keepalive')
    ->useScript('field.passwordview');

Text::script('JSHOWPASSWORD');
Text::script('JHIDEPASSWORD');

ob_start("flc_trigger_event");

function flc_trigger_event($text)
{
  return JHtml::_('content.prepare', $text, '', 'mod_login.content');
}

?>

{modal content="login_content" title="Login"}Login{/modal}

{modalcontent login_content}
<form id="login-form-<?php echo $module->id; ?>" class="mod-login" action="<?php echo Route::_('index.php', true); ?>" method="post">

    <?php if ($params->get('pretext')) : ?>
        <div class="mod-login__pretext pretext">
            <p><?php echo $params->get('pretext'); ?></p>
        </div>
    <?php endif; ?>

    <div class="mod-login__userdata userdata">
        <div class="mod-login__username form-group">
            <?php if (!$params->get('usetext', 0)) : ?>
                <div class="input-group">
                    <input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
                    <label for="modlgn-username-<?php echo $module->id; ?>" class="visually-hidden"><?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
                    <span class="input-group-text" title="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
                        <span class="icon-user icon-fw" aria-hidden="true"></span>
                    </span>
                </div>
            <?php else : ?>
                <label for="modlgn-username-<?php echo $module->id; ?>"><?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
                <input id="modlgn-username-<?php echo $module->id; ?>" type="text" name="username" class="form-control" autocomplete="username" placeholder="<?php echo Text::_('MOD_LOGIN_VALUE_USERNAME'); ?>">
            <?php endif; ?>
        </div>

        <div class="mod-login__password form-group">
            <?php if (!$params->get('usetext', 0)) : ?>
                <div class="input-group">
                    <input id="modlgn-passwd-<?php echo $module->id; ?>" type="password" name="password" autocomplete="current-password" class="form-control" placeholder="<?php echo Text::_('JGLOBAL_PASSWORD'); ?>">
                    <label for="modlgn-passwd-<?php echo $module->id; ?>" class="visually-hidden"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
                    <button type="button" class="btn btn-secondary input-password-toggle">
                        <span class="icon-eye icon-fw" aria-hidden="true"></span>
                        <span class="visually-hidden"><?php echo Text::_('JSHOWPASSWORD'); ?></span>
                    </button>
                </div>
            <?php else : ?>
                <label for="modlgn-passwd-<?php echo $module->id; ?>"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
                <input id="modlgn-passwd-<?php echo $module->id; ?>" type="password" name="password" autocomplete="current-password" class="form-control" placeholder="<?php echo Text::_('JGLOBAL_PASSWORD'); ?>">
            <?php endif; ?>
        </div>

        <?php if (PluginHelper::isEnabled('system', 'remember')) : ?>
            <div class="mod-login__remember form-group">
                <div id="form-login-remember-<?php echo $module->id; ?>" class="form-check">
                    <input type="checkbox" name="remember" class="form-check-input" value="yes" id="form-login-input-remember-<?php echo $module->id; ?>">
                    <label class="form-check-label" for="form-login-input-remember-<?php echo $module->id; ?>">
                        <?php echo Text::_('MOD_LOGIN_REMEMBER_ME'); ?>
                    </label>
                </div>
            </div>
        <?php endif; ?>

        <?php foreach ($extraButtons as $button) :
            $dataAttributeKeys = array_filter(array_keys($button), function ($key) {
                return substr($key, 0, 5) == 'data-';
            });
            ?>
            <div class="mod-login__submit form-group">
                <button type="button"
                        class="btn btn-secondary w-100 <?php echo $button['class'] ?? '' ?>"
                        <?php foreach ($dataAttributeKeys as $key) : ?>
                            <?php echo $key ?>="<?php echo $button[$key] ?>"
                        <?php endforeach; ?>
                        <?php if ($button['onclick']) : ?>
                        onclick="<?php echo $button['onclick'] ?>"
                        <?php endif; ?>
                        title="<?php echo Text::_($button['label']) ?>"
                        id="<?php echo $button['id'] ?>"
                        >
                    <?php if (!empty($button['icon'])) : ?>
                        <span class="<?php echo $button['icon'] ?>"></span>
                    <?php elseif (!empty($button['image'])) : ?>
                        <?php echo $button['image']; ?>
                    <?php elseif (!empty($button['svg'])) : ?>
                        <?php echo $button['svg']; ?>
                    <?php endif; ?>
                    <?php echo Text::_($button['label']) ?>
                </button>
            </div>
        <?php endforeach; ?>

        <div class="mod-login__submit form-group">
            <button type="submit" name="Submit" class="btn btn-primary w-100"><?php echo Text::_('JLOGIN'); ?></button>
        </div>

        <?php
            $usersConfig = ComponentHelper::getParams('com_users'); ?>
            <ul class="mod-login__options list-unstyled">
                <li>
                    <a href="<?php echo Route::_('index.php?option=com_users&view=reset'); ?>">
                    <?php echo Text::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
                </li>
                <li>
                    <a href="<?php echo Route::_('index.php?option=com_users&view=remind'); ?>">
                    <?php echo Text::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
                </li>
                <?php if ($usersConfig->get('allowUserRegistration')) : ?>
                <li>
                    <a href="<?php echo Route::_($registerLink); ?>">
                    <?php echo Text::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-register" aria-hidden="true"></span></a>
                </li>
                <?php endif; ?>
            </ul>
        <input type="hidden" name="option" value="com_users">
        <input type="hidden" name="task" value="user.login">
        <input type="hidden" name="return" value="<?php echo $return; ?>">
        <?php echo HTMLHelper::_('form.token'); ?>
    </div>
    <?php if ($params->get('posttext')) : ?>
        <div class="mod-login__posttext posttext">
            <p><?php echo $params->get('posttext'); ?></p>
        </div>
    <?php endif; ?>
</form>

{/modalcontent}

<?php ob_end_flush(); ?>
 

Download the override

override-modal-login-j4.zip

Install the override

Enjoy the override

PayPalMe with a beer

Joomla overrides list

A bunch of tips and snippets
Agenda activities
Archived articles
Articles carousel
Articles list
Articles popular
Articles slideshow
Author bio
Awesome stats
Best offers
Blog article
Blog intro
Blog layout
Blog post
Bootstrap 5 Login Form
Calendar list
Card overlay
Category list
Clients testimonials
Concerts layout
Conference schedule
Documentation center
eCommerce products
Error 404 page
Events list
Facebook timeline
Featured articles
Features boxes
Five articles
Flexbox Card
Flipping postcard
Footer links
Frequently Asked Questions
Friends list
Glossary + index - Joomla4
Gmail inbox
Google SERPs
Graphic portfolio
Great RSS
Horizontal news
Horizontal testimonials
Job board
Knowledge base
Knowledge base Joomla 4
Latest blog
Latest projects
Latest users
Login form - Bootstrap 4
Login with picture
Magazine categories
Magazine Newsfeed
Menu restaurant
Modal login
Movies list
News Ticker
Nice agenda - Bootstrap 4
Offcanvas menu
Our services
Pagination - Bootstrap 4
Portfolio gallery
Pricing table
Products list
Profile card
Profile edition in tabs
Real estate listing
Receipt
Related articles
Related posts
Responsive timeline
Schedule event
Search - Bootstrap 4
Sidebar news
Similar tags
Staff section
Take five
Team list
Top news
Tree menu
Upcoming events
Vertical timeline

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net

About

Joomla

Quick links

Latest posts