任何人都可以帮助建议添加到我用来创建弹出窗口的解决方案所需的代码吗？我想在重复的表条目上使用它，但所有弹出窗口在单击时都保持打开状态。我希望它们在鼠标离开弹出窗口时消失，或者在一段时间后（比如 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 popupfunction myFunction(id) { var popup = document.getElementById("myPopup"+id); popup.classList.toggle("show");}</script></body></html>
3 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
1) 我使用过 Jqueryhide()和show()函数。
2）我已经写成内联样式display:none而不是visibility:hidden.
3）我已经设置了timeout2 秒后隐藏文本。
<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>
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
<!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>
喵喵时光机
TA贡献1846条经验 获得超7个赞
由于您使用 jQuery 标记了问题，因此我将使用它提供答案。但首先你需要稍微改变你的 html。
你可以包装“点击我！” 用一个跨度使它接收点击事件。我们可以使用 jQuery data() 函数添加一个计时器，如果mouseover没有发生，则在 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>
添加回答
举报
0/150
提交
取消