Login menu item as modal

Question

Is there any way of opening the "login" menu item as a modal box?

This would allow the user to stay on the same page after logging in.

I don't want 3rd party extensions as they tend to crack with time, I was thinking more of an override of the users component, together with some sort of class or attribute to open the login page as a modal instead of redirecting the user to a login page.

I'm using Ulkit - see here an example of modal component

My page is this

Thanks in advance for helping!

Answer 1

a) Add the following code to your frontend template index.php

<?php if ($this->countModules( 'modal' )) : ?>
<!-- This is the modal -->
<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <jdoc:include type="modules" name="modal" />
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </p>
    </div>
</div>
<?php endif;?>

b) Make a template position called 'modal' in template.xml

c) Place your login module in this position 'modal'.

d) You may need to override the login module to be compatible to work with ui kit as it would be bootstrap. https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Here is a sample of one I did for Zurb Foundation 5 modal:

https://gist.github.com/iamrobert/5a1d206279d1faad245dc7c1f1502772

e) Call the code with your button:

<a href="#modal-example" uk-toggle>Open</a>

You could also build your own module chrome (https://docs.joomla.org/Applying_custom_module_chrome) for UI Kit as well....

Answer 2

You can use this free module: https://jsns.eu/joomla-extensions/js-lightbox-login

Just create new menu item (System Links -> URL). Then set the URL to:

#login-modal