我有一个物品清单。当我单击其中的一个时,应该在它们上方显示一个弹出窗口,但这不会发生,实际上,弹出窗口始终显示在同一位置。 如何更改弹出窗口的位置,使其仅出现在单击的项目上方?
这是我的CSS:
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: 125%;
left: 50%;
margin-left: -80px;
}
popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
这是我组件的模板:
template:'<li> <div class="popup"> <button v-on:click="aggiornaClicked"> {{ todo.name }} </button> <span class="popuptext" id="myPopup"> Acquistato! </span> </div> </li>'
答案 0 :(得分:0)
$(".content button").click(function(){
$(this).parent().children(".popup").addClass("show")
});
*{
margin:0;
padding:0;
}
.content{
width:30%;
height:100px;
display:flex;
margin-top:10px;
background:red;
color:white;
align-items:center;
position:relative;
flex-wrap:wrap;
}
p{
width:100%;
text-align:center;
}
button{
width:50%;
margin:0 auto;
}
.popup{
opacity:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.show.popup{
opacity:1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<p>some text</p>
<button>show</button>
<div class="popup"><p>this is a popup</p></div>
</div>
<div class="content">
<p>some text</p>
<button>show</button>
<div class="popup"><p>this is a popup</p></div>
</div>
这与您尝试执行的操作类似!