Popup JS
Posté : 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>
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>