Popup JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
FBDG
Messages : 2
Enregistré le : 29 mars 2021, 10:22

Popup JS

Message par FBDG » 29 mars 2021, 10:40

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>

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Popup JS

Message par webmaster » 30 mars 2021, 10:02

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)
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

FBDG
Messages : 2
Enregistré le : 29 mars 2021, 10:22

Re: Popup JS

Message par FBDG » 30 mars 2021, 13:42

Merci beaucoup !

Répondre