有人能帮助建议添加到我用来创建弹出窗口的此解决方案所需的代码吗？ W3 Tutorial on creating a popup div
我想在重复的表项上使用它，但是所有的弹出窗口在单击时都保持打开状态。我希望它们在鼠标离开弹出窗口时消失，或者在一定时间（例如2秒钟）后消失（如果鼠标实际上没有移过它）。或者，当单击另一个弹出窗口时，它可以隐藏其他弹出窗口。
提前谢谢！我将回到该解决方案，我尝试并修改了一些其他解决方案，这些解决方案可在测试页面上运行，但不适用于我的主要php循环页面-因为必须有一些冲突的代码，需要更多时间来确定。但是，实际上会出现此弹出示例。
任何帮助将不胜感激。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.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 when clicking on the popup container (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;
}
}
</style>
</head>
<body>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td><div class="popup" onclick="myFunction(1)">Click me! <span class="popuptext" id="myPopup1">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(2)">Click me! <span class="popuptext" id="myPopup2">Popup text...</span> </div></td>
</tr>
</table>
<script>
// When the user clicks on <div>, open the popup
function myFunction(id) {
var popup = document.getElementById("myPopup"+id);
popup.classList.toggle("show");
}
</script>
</body>
</html>
答案 0 :(得分：1)
1）我使用了Jquery hide()和show()函数。
2）我写的是内联样式display:none，而不是visibility:hidden。
3）我将timeout设置为2秒后隐藏文本。
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.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 when clicking on the popup container (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;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td><div class="popup" onclick="myFunction(1)">Click me! <span class="popuptext" id="myPopup1" style="display: none;">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(2)">Click me! <span class="popuptext" id="myPopup2" style="display: none;">Popup text...</span> </div></td>
</tr>
</table>
<script>
// When the user clicks on <div>, open the popup
function myFunction(id) {
$("#myPopup"+id).show();
setTimeout(function(){
$("#myPopup"+id).hide();
}, 2000);
}
</script>
</body>
</html>
答案 1 :(得分：0)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.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 when clicking on the popup container (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;
}
}
</style>
</head>
<body>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td><div class="popup" onclick="myFunction(1)" onmouseout="myFunction2(1)">Click me! <span class="popuptext" id="myPopup1">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(2)" onmouseout="myFunction2(2)">Click me! <span class="popuptext" id="myPopup2">Popup text...</span> </div></td>
</tr>
</table>
<script>
// When the user clicks on <div>, open the popup
function myFunction(id) {
var popup = document.getElementById("myPopup"+id);
popup.classList.toggle("show");
}
function myFunction2(id) {
var popup = document.getElementById("myPopup"+id);
popup.classList.toggle("hide");
}
</script>
</body>
</html>
答案 2 :(得分：0)
由于您使用jQuery标记了问题，因此我将提供使用它的答案。但是首先，您需要稍微更改html。
您可以包装“单击我！”使其可以接收点击事件。如果没有发生mouseover，我们可以使用jQuery data（）函数添加一个在2秒后触发的计时器。使用data()会将计时器仅附加到单击的元素。
我也注释了代码以了解该过程。
查看此代码：
$(document).ready(function() {
jQuery(".link").on("click", function() {
let popup = jQuery(this).siblings('.popuptext');
popup.toggleClass("show");
// Check the current staet of the link span
if (popup.hasClass("show")) {
// Set timout if the popup is shown to remove it in two seconds
const popupTimeout = setTimeout(() => {
popup.removeClass("show");
}, 2000);
popup.data("timeout", popupTimeout)
} else {
// Clear popup timeout if the popup is hidden
clearTimeout(popup.data("timeout"));
}
});
// If use hovers over the poup then clear timeout and keep the popup
jQuery(".popup").on("mouseenter", ".popuptext.show", function() {
let popupText = jQuery(this);
let timeout = popupText.data("timeout");
clearTimeout(timeout);
});
// if user moves mouse away we hide the poup
jQuery(".popup").on("mouseleave", ".popuptext.show", function() {
jQuery(this).removeClass("show");
});
});/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.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 when clicking on the popup container (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;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td>
<div class="popup">
<span class='link'>Click me!</span>
<span class="popuptext" id="myPopup1">
<a href="Link 1">Link 1</a> | <a href="link2">Link 2</a>
</span> </div>
</td>
</tr>
<tr>
<td>
<div class="popup">
<span class='link'>Click me!</span>
<span class="popuptext" id="myPopup2">Popup text...</span> </div>
</td>
</tr>
</table>