Ouvrir un modal au chargement d'une page en cliquant sur un lien

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Ouvrir un modal au chargement d'une page en cliquant sur un lien

    Bonjour,


    Joomla 3.9.28

    Astroid Framework 2.5.2

    Astroid Template One 1.3.2


    Je n'ai pas de question mais partage une info que j'ai résolue et qui pourrait intéresser certain(e)s. Peut-être même qu'elle pourra être améliorée.

    Je suis en train de construire mon site et je veux pouvoir ouvrir une photo dans un modal en cliquant sur un lien provenant d'une autre page ou, dans mon cas, d'un Epub. Ce modal (photo) s'ouvre au chargement de la page et lorsque je clique ensuite à côté, le modal disparaît et la page s'affiche.

    J'ai posé ma question sur https://joomla.stackexchange.com/ (ici et aussi pour comprendre pourquoi je n'arrivais pas au départ à utiliser un script jQuery pour faire fonctionner un simple lien ) mais j'ai fini par trouver la solution ici :

    Is there any way using which when a user opens a url http://www.website.com/page/#delete-page and if that page has a twitter bootstrap modal with same id delete-page it should open instantly. So in



    Donc, sur une page #2 que j'appelle pour l'exemple "page2", J'ai ce modal (que j'ai décidé de garder caché (sans lien sur la page)) qui affiche une photo :

    Code HTML:
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-body text-center">
             <img src="https://mysite.com/picture1.jpg">
            </div>
          </div>
    
        </div>
    </div>
    Ensuite, pour lancer le modal au démarrage de la page, j'ai placé dans mon fichier perso JS (en remplaçant $ par jQuery, parce que c'est sur Joomla)

    Code:
    jQuery(document).ready(function() {
        if(window.location.href==='https://mysite.com/page2#myModal'){
            jQuery('#myModal').modal('show');
        };
    });
    Sur ma page #1 ou en tant que lien dans un Epub (testé avec Chrome e-reader), j'utilise ce lien :

    Code HTML:
    <a alt="lien vers" href="https://mysite.com/page2#myModal" target="_blank">lien vers la page qui va ouvrir #myModal au démarrage de la page</a>
    Ce lien ouvre un nouvel onglet où myModal est automatiquement lancé.

    Quand je clique à l'extérieur de la photo du modal, je reviens sur la page où le modal est caché et où d'autres éléments se trouvent (dans mon cas, une lightbox).

    Ensuite, tout ce que j'ai à faire, c'est changer l'ID du modal avec une nouvelle photo pour répéter l'événement, comme je le souhaite (mes lecteurs, qui n'ont qu'une vignette de la photo sur leur Epub, peuvent voir la photo en grand grâce à ce principe et ensuite continuer de regarder les autres en revenant à la page principale ou tout fermer et continuer leur lecture).

    Afin de pouvoir utiliser jQuery et modal, j'ai placé dans l'index.php de mon template Astroid (MyJoomla/template/my_Astroid_Template/index.php)

    Code:
    JHtml::_('jquery.framework');
    JHtml::_('behavior.modal');
    Comme ça :

    Code:
    <?php
    
    /**
     * @package   Astroid Framework
     * @author    JoomDev https://www.joomdev.com
     * @copyright Copyright (C) 2009 - 2020 JoomDev.
     * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
     */
    // No direct access.
    defined('_JEXEC') or die;
    defined('_ASTROID') or die('Please install and activate <a href="https://www.astroidframework.com/" target="_blank">Astroid Framework</a> in order to use this template.');
    
    if (file_exists(__DIR__ . "/helper.php")) {
       require_once __DIR__ . "/helper.php"; // Template's Helper
    }
    
    JHtml::_('jquery.framework');
    JHtml::_('behavior.modal');
    
    $document = Astroid\Framework::getDocument(); // Astroid Document
    // Output as HTML5
    $this->setHtml5(true);
    ?>
    J'ai aussi ajouté un script vers jQuery.js et vers mon fichier personnel js (que j'ai sauvegardé dans /media/system/js/)dans la zone de code personnalisé du template Astroid, dans la zone "avant </body>"

    Code:
    <!DOCTYPE html>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- End - jQuery -->
    <!-- Mon JS -->
    <script type="text/javaScript" src="/media/system/js/monjs.js"></script>
    <!-- End - Mon JS -->

    Voilà, vous pouvez voir le résultat temporaire sur mon site web : https://lise-whales.com/


Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X