我一直在玩这段代码，但遇到了一些麻烦。我有它，至少到目前为止，当选择文本时会显示一个弹出窗口。问题是我无法让它对所有 4 个都起作用，所以我得到 4 个不同的弹出窗口，所有弹出窗口都连接到第一个。我也在尝试获取它，以便弹出窗口显示在每个单击的按钮下方。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.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: -250%;
left: 50%;
margin-left: -80px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
</style>
</head>
<body style="text-align:center">
<div class="popup" onclick="myFunction()">First Popup
<span class="popuptext" id="myPopup">This is the first pop up selected</span>
</div>
<div class="popup" onclick="myFunction()">second Popup
<span class="popuptext" id="myPopup">This is the second pop up selected</span>
</div>
<div class="popup" onclick="myFunction()">third Popup
<span class="popuptext" id="myPopup">This is the third pop up selected</span>
</div>
<div class="popup" onclick="myFunction()">Fourth Popup
<span class="popuptext" id="myPopup">This is the fouth pop up selected</span>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
我的问题是如何才能让弹出窗口正确显示在每个文本下方？
谢谢。
最佳答案
您为每个弹出窗口使用了相同的 ID。你不能那样做。每个弹出窗口都需要有一个唯一的 ID。
关于javascript - OnClick 单个 JavaScript 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49123403/