Javascript 带叠加锚的模态

虽然我很快就学会了JS，但我还是有一个问题无法解决。我有一个模态，它位于

和一个

中，其中包含图像和产品名称，当我将鼠标悬停在

上时，我会看到一个悬停图标，它是

以下是我创建的JS：

var modals = document.getElementsByClassName("modal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("prolabel-wrapper");

var spans=document.getElementsByClassName("close");

var wishlist=document.getElementsByClassName("link-wishlist");

var showPopup = true;
// Get the modal
window.onload = function(){

for(let i=0;i<wishlist.length;i++) {
   wishlist[i].onclick = function() {
      var showPopup = false;
      alert("Here - showPopup is " + showPopup);
      modals[i].style.display = "none";
      return false;
   }
}

alert("Here2 - showPopup is " + showPopup);

    if (showPopup){

        alert ("Still getting called" + showPopup);
for(let i=0;i<btns.length && showPopup;i++) {

        btns[i].onclick = function() {
        modals[i].style.display = "block";
        }

}

for(let i=0;i<spans.length && showPopup;i++){

        spans[i].onclick = function() {
        modals[i].style.display = "none";
        }

}
}}

var modals=document.getElementsByClassName（“modal”）；
//获取打开模式对话框的按钮
var btns=document.getElementsByClassName（“prolabel包装”）；
var span=document.getElementsByClassName（“关闭”）；
var wishlist=document.getElementsByClassName（“链接wishlist”）；
var=true；
//获取模态
window.onload=函数（）{
对于（让i=0；i在第一个
for
循环中，您试图将全局变量
showPopup
设置为false，但您正在声明一个新变量

尝试替换：

var showPopup = false;

作者：

var modals = document.getElementsByClassName("modal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("prolabel-wrapper");

var spans=document.getElementsByClassName("close");

var wishlist=document.getElementsByClassName("link-wishlist");

var showPopup = true;
// Get the modal
window.onload = function(){

for(let i=0;i<wishlist.length;i++) {
   wishlist[i].onclick = function() {
      var showPopup = false;
      alert("Here - showPopup is " + showPopup);
      modals[i].style.display = "none";
      return false;
   }
}

alert("Here2 - showPopup is " + showPopup);

    if (showPopup){

        alert ("Still getting called" + showPopup);
for(let i=0;i<btns.length && showPopup;i++) {

        btns[i].onclick = function() {
        modals[i].style.display = "block";
        }

}

for(let i=0;i<spans.length && showPopup;i++){

        spans[i].onclick = function() {
        modals[i].style.display = "none";
        }

}
}}

var showPopup = false;

showPopup = false;