Page 1 sur 1

Popup JS

Posté : 29 mars 2021, 10:40
par FBDG
Bonjour,

Je bosse en tant que Content Marketer pour le site Wordpress d'un client et n'ai aucun accès hors des pages. J'ai intégré un script afin de pouvoir avoir un pop-up qui se génère sur les fiches produits (25 par page). Il fonctionne très bien, un seul pb : je suis obligé de faire un script différent par produit. Etant assez nouveau en JS je suis ouvert aux suggestions pour n'avoir qu'un script et l'appeler pour chaque pop-up différents.

D'avance merci !

Un produit type

<script>
// When the user clicks on <div>, open the popup
function myFunction0() {
var popup = document.getElementById("myPopup0");
popup.classList.toggle("show");
}
</script>

<div class="popup" onmouseenter="myFunction0()" onmouseleave="myFunction0()">
<h4>Coudes femelle-femelle - Angle 22°30</h4>
<img src="https://www.dyka.fr/wp-content/uploads/ ... FF2230.png" width="400" height:"400"="">
<span class="popuptext" id="myPopup0">
<strong>Diamètres disponibles </strong>
<p>32 / 40 / 50 / 100</p>
<img src="https://www.dyka.fr/wp-content/uploads/NF-Embed.png" alt="nf logo" width="40" height:"40"="" style="margin: 0px 0px 0px 40%;"><p>E* + Me</p>
</span>
</div>

Re: Popup JS

Posté : 30 mars 2021, 10:02
par webmaster
Bonjour,

Le principe est d'appeler un paramètre pour n'avoir qu'une seule fonction avec num en paramètre
La fonction ouvre le popup appele "myPopup" concaténé à num :

Code : Tout sélectionner

<script>
// When the user clicks on <div>, open the popup
function myFunction(num) {
var popup = document.getElementById("myPopup"+num);
popup.classList.toggle("show");
}
</script>
Pour l'appel, on écrit :

Code : Tout sélectionner

<div class="popup" onmouseenter="myFunction(0)" onmouseleave="myFunction(0)">
<h4>Coudes femelle-femelle - Angle 22°30</h4>
<img src="https://www.dyka.fr/wp-content/uploads/ ... FF2230.png" width="400" height:"400"="">
<span class="popuptext" id="myPopup0">
<strong>Diamètres disponibles </strong>
<p>32 / 40 / 50 / 100</p>
<img src="https://www.dyka.fr/wp-content/uploads/NF-Embed.png" alt="nf logo" width="40" height:"40"="" style="margin: 0px 0px 0px 40%;"><p>E* + Me</p>
</span>
</div>
Et on peut en ajouter simplement en changeant l'appel
myPopup123 et myFunction(123)

Re: Popup JS

Posté : 30 mars 2021, 13:42
par FBDG
Merci beaucoup !