Javascript 无法在一页中插入03弹出窗口

我正在尝试在我的页面上实现03弹出窗口，但无法实现。我试图通过为每个弹出窗口分配不同的ID来实现这一点。非常感谢您的帮助。这是我的密码 CSS:

这是我的HTML：

<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

在这里，我尝试应用第二个弹出窗口：

<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
  <span class="popuptext" id="myPopup2">A Simple Popup 2</span>
</div>

<script>
function myFunction() {
  var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");
}
</script>

一个简单的弹出窗口2
函数myFunction（）{
var popup=document.getElementById（“myPopup2”）；
popup.classList.toggle（“显示”）；
}

---

三个也一样。我被困在这里了。提前感谢

您不能创建多个同名函数。但是，一种解决方案是创建一个可重用函数并将单击的元素传递给它。然后在弹出div上还添加一个名为

data target

的数据属性，该属性保存要打开的弹出窗口的ID

例如：

或

那么您只需要下面的单个函数，就不必复制它了

function myFunction(el){
  var popup = document.getElementById(el.dataset.target);
  popup.classList.toggle("show");
}

<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
  <span class="popuptext" id="myPopup2">A Simple Popup 2</span>
</div>

<script>
function myFunction() {
  var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");
}
</script>

function myFunction(el){
  var popup = document.getElementById(el.dataset.target);
  popup.classList.toggle("show");
}