Login Module

How can I setup the login module to it pulls up an overlay like the "Gavick Pro" website? Right now when you click login, it takes you to another page where it has a username and password field.

Additionally, is there a way to have the login button change to My Account like the "Gavick Pro" site once you're logged in?

Your assistance would be greatly appreciated.

Hi

This is a little bit different problem. Anyway there is a way to make it. First in /layouts/default.php You need to create a popup box with a login module position inside, for example:

Code: Select all

<div id="login-popup" class="hide">
    <jdoc:include type="modules" name="login-popup" />
</div>


than add this code to css to hide it:

Code: Select all

.hide {
    display: none;
}


Next thing is to publish a login module inside newly created position called "login-popup".

And the last step is to make a link which will activate the popup. To do this You need edit the link to Login page, You've mentioned before and add a class="modal" to it and replace href="#login-popup" to this link.

If it will not be working, get back to default.php file and add this code to make sure popups are being loaded:

Code: Select all

JHTML::_('behavior.modal');


than add this code to css to hide it:

Maybe I missed a step in this but hiding the module hides it from the page, but also is hiding the login form in the pop-up.

Hi

Please show me Your site with this code changes applied.

Still in local development. I will see if I don't figure it out before I move it to the live server.

Hi

Ok. So please ignore the problem now and let me know when website will be online, so I'll help You than.

And the last step is to make a link which will activate the popup. To do this You need edit the link to Login page, You've mentioned before and add a class="modal" to it and replace href="#login-popup" to this link.

If it will not be working, get back to default.php file and add this code to make sure popups are being loaded:

Code: Select all

JHTML::_('behavior.modal');


Could you be more explicit, I didn't understand the last step.
In case we want to activate the popup from a menu link, what type of menu do we have to create?
Thanks.

Hi

I think the best menu type would be "separator", so it will not redirect after clicking. Than the important part is to have login popup box prepared in default.php.

This post old and since I've answered here the last time I've learned a new method. Much simplier I believe. Steps are still the same:

1. Adding a module class suffix to menu item which will trigger the popup. For example " login_popup"
2. Adding a popup box to default.php file, You can place there a module position.

Code: Select all

<div id="login_popup">
    <jdoc:include type="modules" name="login-popup" />
</div>


3. Adding a jQuery code which will open popup on click:

Code: Select all

<script type="text/javascript">
(function($) {
   $(document).ready(function() {
      $('#login_popup').hide();

      $('.login_popup').click(function() {
         $('#login_popup').toggle('slow', function() { });
      });
   });
})(jQuery)
</script>


4. With this method some styling to new box will be required, but this is up to You.