Sur une première page, vous avez modifié le code "modal" afin qu'il se déclenche lors de l'ouverture de page. Voir ici

Vous désirez changer le contenu qui s'affiche en "pop-up" par une photo et un lien vers une page du site.

Vous devez utiliser Firefox et son inspecteur.
Vous aurez besoin d'ouvrir les pages en mode éditeur, mais aussi en mode visiteur.

Le code se compose :

1 - D'un script javascript, le "moteur" qui permet l'interactivité avec le visiteur,

2- De code css, qui contrôle l'aspect des éléments

3 - De quelques lignes html, qui "fabriquent" les éléments à afficher. Ce sont ces lignes html qu'il faut modifier.

<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 en pop-up)

 </section>

</div>

En mode éditeur

Ouvrez le module html contenant le code "modal" et vérifiez que l'adresse URL de redirection est celle de la page actuelle, au début du script javascript. Par exemple, pour la présente leçon :

(…)

document.location.replace('https://www.fredvig.com/le%C3%A7ons/modal/modalphoto/#pub');

Si ce n'est pas le cas, copiez l'adresse URL en mode visiteur, et collez-là en place, dans le script, que vous enregistrez.

En mode visiteur, dans Firefox

Faites un clic droit juste sur l'image, puis choisissez "Examiner l'élément". Dans l'inspecteur qui s'affiche, repérez la partie du code qui correspond à la photographie. Remarquez qu'il faut "remonter" dans le code pour trouver la balise <div> qui enveloppe l'image.

Faites un clic droit sur le <div> et choisissez "Copier > l'intérieur du HTML"

Note :  il est préférable de copie l'intérieur du <div> plutôt que <figure> ou même <img >. Cela conserve la même structure et l'image sera gérée par Jimdo comme toutes les autres images.

Sur la page modale en Mode éditeur.

Ouvrez le module où se trouve le code.

Repérez la partie qui commence par <section> et collez le code enregistré juste après, à la place des éléments qui s'y trouvent déjà.

...

<div id="pub" class="oModal">

<header>
            <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
            <h2>
                Titre
            </h2>
        </header>
        <section>

(collez ici le <div> photo en html)

 </section>

</div>

Enregistrez pour fermer la fenêtre.