web-dev-qa-db-fra.com

Login élément de menu en tant que modal

Est-il possible d'ouvrir l'élément de menu "login" en tant que boîte modale?

Cela permettrait à l'utilisateur de rester sur la même page après s'être connecté.

Je ne veux pas d'extensions tierces, car elles ont tendance à se fissurer avec le temps. Je pensais plutôt à un remplacement du composant users, ainsi qu'à une sorte de classe ou d'attribut pour ouvrir la page de connexion en tant que modal au lieu de rediriger l'utilisateur une page de connexion.

J'utilise Ulkit - voir ici un exemple de composant modal

Ma page est ceci

Merci d'avance pour votre aide!

joomla-3.xloginmodal
2
Nuno Nogueira

a) Ajoutez le code suivant à votre template frontend 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) Créez une position de modèle appelée 'modal' dans template.xml

c) Placez votre module de connexion dans cette position 'modal'.

d) Vous devrez peut-être remplacer le module de connexion pour qu'il soit compatible afin de fonctionner avec le kit d'interface utilisateur car il s'agirait d'un bootstrap. https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Voici un exemple de celui que j'ai créé pour Zurb Foundation 5 modal:

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

e) Appelez le code avec votre bouton:

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

Vous pouvez également créer votre propre module chrome ( https://docs.joomla.org/Applying_custom_module_chrome) ) pour le kit d'interface utilisateur ....

2
iamrobert

Vous pouvez utiliser ce module gratuit: https://jsns.eu/joomla-extensions/js-lightbox-login

Il suffit de créer un nouvel élément de menu (Liens système -> URL). Puis définissez l'URL sur:

#login-modal
0
Frostbourn