Crée un pop up textuel depuis une image sur mon wordpress

Merci de ta réponse "elgazar"
mais je le fais depuis deux semaine déjà.
mon ami google ne peux m'aider, je cherche vraiment un dans le style décrit en en-tête
pop-up en cliquant sur une image avec tout le décriptif de l'image
exemple: un portable -----> aprés un clique ----> pop-up avec la configuration
voiture -----> après un clique -----> pop-up avec les caractéristique technique
je cherche vraiment que cela s'ouvre dans un pop-up en restant gratuit
c'est le seul détail qui me manque pour mon site wordpress :/
auriez-vous une piste plus précise s'il vous plaie
Merci D'avance

ce que tu demandes c'est le comportement normale d'une popup donc je vois pas où est le problème même un script javascript peut faire l'affaire par contre si tu veux qu'elle soit un peu plus jolie que la simple box windows, penche-toi du coté des fenêtres modales en css3

code et démo sur cette page clique sur le bouton ouvrir l'exemple, au milieu de la page

bonjour elgazar, suite a la lecture de votre page je trouve cela très compliqué à mettre en place
J'ai bien vu le pop-up "Ouvrir l'exemple" j'aime bien mais c'est quel script de la page du coup car cela fais que 1 ans que je suis dans les codes.
car selon vous ou devrais-je mettre ce script dans mon wordpress? Dans la page ou je veux le voir j'ai essayé sans succès
Dans mes feuille css? si c'est le cas comment je le ferais répondre sur ma page wordpress?
Mon thème wordpress: OneTone

le code complet avec les css et le code html est sous le titre " exemple complet avec style"

Pour le mettre dans wordpress , la méthode la plus simple est de mettre le code css sauf les deux balises <style> du début et de fin dans le fichier style.css de ton thème.


ensuite tu récupére le code html, tu va dans l'édition de ton article, tu clique sur l'onglet éditeur texte et tu colles le code. Tu n'a plus qu'a le modifier pour mettre un lien en image et modifier les autres paramètres (titre, description, etc) par exemple

<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
       <h2>le titre de ta popup </h2>
     </header>
     <section>
      <p>Contenu de la popup </p>
     <section>
     <footer class="cf">
      <a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
     </footer>
  </div>
</div>
 
<a href="#oModal"><img src="adresse réelle de l'image" alt=alt de l'image" width="591" height="443" class="alignnone size-medium wp-image-2101" /></a>

Pour récupérer le lien de l'image, il suffit de cliquer sur "ajouter media" dans l'éditeur et de sélectionner ton image, tu verras un code img src dans l'éditeur texte et colle le a la place du texte en gras dans le lien puis efface celui que wordpress vient de créer (tu n'en a plus besoin)

Merci cela est l'une des solution les plus efficace que j'ai pu avoir merci beaucoup a toi elgazar ^^