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

Question

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

.fa {

  font-size: 50px;

  cursor: pointer;

  user-select: none;

}

.fa:hover {

  font-size:20px;

  transition: 1s ease-out;

}

/* Popup container - can be anything you want */

.popup {

  position: relative;

  display: inline-block;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

/* The actual popup */

.popup .popuptext {

  visibility: hidden;

  width: 160px;

  background-color: #555;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 8px 0;

  position: absolute;

  z-index: 1;

  bottom: 125%;

  left: 50%;

  margin-left: -80px;

}

/* Popup arrow */

.popup .popuptext::after {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: #555 transparent transparent transparent;

}

/* Toggle this class - hide and show the popup */

.popup .show {

  visibility: visible;

  -webkit-animation: fadeIn 1s;

  animation: fadeIn 1s;

}

/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {

  from {opacity: 0;} 

  to {opacity: 1;}

}

@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity:1 ;}

}

这是我的 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>

我的 JS 代码：

// When the user clicks on div, open the popup

function myFunction() {

  var popup = document.getElementById("myPopup");

  popup.classList.toggle("show");

}

function myFunctions(x) {

  x.classList.toggle("fa-times-circle");

}

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

<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>

弹出窗口三也是如此。我被困在这里了。提前致谢

Answer 1

您不能创建多个具有相同名称的函数。但是，一种解决方案是创建一个可重用函数并将单击的元素传递给它。然后在您的弹出式 div 上还添加一个名为的数据属性，data-target该属性包含您要打开的弹出式窗口的 ID。例如：<div class="popup" data-target="myPopup" onclick="myFunction(this)">或者<div class="popup" data-target="myPopup2" onclick="myFunction(this)">然后你只需要下面的单一功能，你不必复制它。function&nbsp;myFunction(el){ &nbsp;&nbsp;var&nbsp;popup&nbsp;=&nbsp;document.getElementById(el.dataset.target); &nbsp;&nbsp;popup.classList.toggle("show"); }