Titre
Fenêtre Modale auto
Vous avez utilisé un code CSS qui permet d'ouvrir une fenêtre d'annonce, avec un bouton, puis de la refermer avec un autre bouton.
Vous désirez que le code se déclenche lors de l'ouverture de page, afin de créer un "pop-up"
Stratégie
L'étude du code nous montre qu'il serait possible de le modifier de façon à ce que la publicité s'affiche par défaut et se ferme au clic, mais l'animation d'ouverture serait plus complexe à conserver. Même si ce code n'est pas typiquement destiné faire un pop up, on ne change pas un dispositif qui fonctionne, on essaie de l'adapter.
Je propose de rajouter une fonction qui déclenche le pop-up lorsque la page est chargée.
Outils
Il faut toutefois comprendre comment fonctionne le code CSS. La "pub" apparaît lorsqu'on clique sur un bouton qui renvoie vers un identifiant, #pub - comme lorsque on veut créer une ancre. Le lien url de la page : https://VotreNomDeDomaine.fr/PageCourante/
devient alors :
https://VotreNomDeDomaine.fr/PageCourante/#pub
Il n'y a pas d'ancre sur la page. Le but de cette opération est de désigner un élément de la page portant l'identifiant #pub.
Dans le code CSS, la pseudo-classe :target permet de mettre en forme cet élément.
Voir éventuellement comment fonctionne cette pseudo classe ici
La nouvelle fonction
Même sans comprendre parfaitement le fonctionnement de :target , on voit que l'on peut tirer profit du changement d'adresse url pour "piloter" les apparitions des éléments.
La nouvelle fonction javascript indique : if(window.location.href.includes("cms.e.jimdo.com") == false)
/* Si l'url courant n'est pas celui de l'éditeur jimdo * , donc seulement pour les visiteurs */
{ window.addEventListener("load", function(event) {
/* créer une fonction lorsque toute la page est chargée */ document.location.replace('https://votrenomdedomaine/votrepage/#pub');
/* Qui consiste à remplacer l'url courant par l'url finissant par /#pub */
});
};
*Il est nécessaire d'éviter que le code fonctionne en mode éditeur, sinon il devient impossible de modifier le site, à moins d'utiliser la connexion sans échec.
Conserver le bouton de déclenchement
il faut toujours laisser la possibilité au visiteur de revenir sur ce qu'il a vu, même si cela lui a été imposé. On laisse donc le bouton.
Ajouter du contenu à la publicité
Comme il est prévu par le code d'origine, l'élément publicitaire est créé en html, afin de pouvoir lui ajouter identifiants (#pub) et des classes (.oModal) qui correspondent au code CSS destiné à piloter leur apparence :
<div id="pub" class="oModal">
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>
Titre
</h2>
</header>
<section>
(ici ce qui apparait dans la publicité)
</section>
</div>
Pour ajouter du contenu, une solution consiste à créer ce contenu avec l'interface de jimdo, textes, colonnes, photos, slider… Puis, de le sélectionner en mode visiteur dans Firefox, clic-droit > code source de la sélection.
le code html correspondant aux élements apparait, il reste à le copier / coller entre les balises <section> </section> du module pub.
Exemple avec une photographie et un lien :