How to create a complete User login in a popup window in Joomla?

[Chacapamac]

I like to create a Login/Logout and Password and Account Creation in a Popup window.
So far, I have been able to do so (not without problems) with JCE Mediabox, but I always end up with part of the template showing in the modal window at some points, even if using &tmpl=component.

Login-logout.jpg

Anybody can give me an overview or put me on the right path of what I need to do to achieve a clean User account management in a popup window?

Ideally, I like to use only Joomla to do so, without third-party extensions.

So far what I have done is:

• Inserting my JCE Mediabox (popup) link (with the &tmpl=component) to a User Awesome icon in a Joomla Custom Module (with “Prepare Content” ON
Code example:
<a href="index.php?option=com_users&amp;view=login&amp;Itemid=007&amp;tmpl=component" class="jcepopup noicon" data-mediabox="1" data-mediabox-width="400" data-mediabox-height="550"><span class="awesome"><i class="fas fa-user fa-fw fa-login"></i></span></a>

popup-link.jpg

• Create Hidden Menus for each state of the user actions

HiddenMenus.jpg

e.g. Login/Logout

login options.jpg

Logout-options.jpg

Any hints about where my mistakes are will be appreciated...

[xplosion]

Take a look on this plugin:
https://github.com/brianteeman/loginmodal

[Per Yngve Berg]

Make a Modal Module Position for the Login Module in your Template.

[Chacapamac]

Take a look on this plugin:
https://github.com/brianteeman/loginmodal

Thanks @xplosion, Yes, I’m testing this Brian plugin right now, but I’m not to sure how to make it work?
Brian tell me:

Change the Selector of the element that will be used to open the modal in the plugin

My modal login link is a Fontawesome User Icon with this code.

Code: Select all

<span class="brianlogin awesome"><i class="fas fa-user fa-fw fa-login"></i></span>

brianplugin.jpg

I’m doing something wrong...