javascript - 如何为弹出窗口设置动态位置？

Question

我有一个元素列表。当我点击其中一个时，弹出窗口应该会出现在它们上方，但这并没有发生，实际上弹出窗口总是出现在相同的位置。 如何更改弹出窗口的位置，使其仅出现在单击的元素上方？

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

Answer 1

$(".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>

这与您尝试做的类似!