[英]How to pop-up message on the exact card where it's clicked?
I'm trying to show some elements in a list of cards and when I click on a card, I need to show a pop-up message on that exact card.我试图在卡片列表中显示一些元素,当我单击卡片时,我需要在该卡片上显示弹出消息。 Right now it's showing up the top card.
现在它显示在最上面的卡片。 But I need to it to show up on the card I click.
但我需要它显示在我点击的卡片上。
Here's my html code for showing card elements and pop-up:这是我用于显示卡片元素和弹出窗口的 html 代码:
<a class="external" ng-repeat="card in cardData" ng-click="popUpFunction()">
<div class="card">
<img class="card-image" src="{{card.thumbNail_image}}" alt="">
<div class="popup">
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<div class="card-infos">
<h2 class="card-title">{{card.contentDescription}}</h2>
</div>
</div>
</a>
Here's the css code:这是css代码:
.popup {
position: relative;
display: inline-block;
cursor: pointer;
height:0px;
width:0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.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;
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 - 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 ;}
}
And here's the js code:这是js代码:
$scope.popUpFunction = function () {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
You can get the element clicked passing the event to the function.您可以点击元素将事件传递给函数。 In the event object, you can extract the target property which is the element clicked.
在事件对象中,您可以提取单击元素的目标属性。 Here it is a quick demo to illustrate.
这是一个快速演示来说明。
Also, it seems that you have your on click on a loop, I don't know angularJS but I think it would be something like this:此外,您似乎点击了一个循环,我不知道 angularJS,但我认为它会是这样的:
<div class="card" ng-click="popUpFunction($event)"> // notice the $event
instead of代替
<a class="external" ng-repeat="card in cardData" ng-click="popUpFunction()">
function onClickShowMessage(event) { const card = event.target; const message = createMessageElement(); card.appendChild(message); } function createMessageElement() { const message = document.createElement('p'); message.innerHTML = 'This is some message'; message.classList.add('message'); return message; }
.card { width: 200px; min-height: 150px; background-color: yellow; cursor: pointer; margin-bottom: 5px; display: block; } .message { background-color: firebrick; color: white; padding: 1rem; }
<a class="card" onclick="onClickShowMessage(event)"></a> <a class="card" onclick="onClickShowMessage(event)"></a> <a class="card" onclick="onClickShowMessage(event)"></a>
To solve the issue, I passed the index of the card as a parameter and checked it in ng-if
为了解决这个问题,我将卡片的索引作为参数传递并在
ng-if
检查它
<a class="external" ng-repeat="card in cardData" ng-click="popUpFunction()">
<div class="card">
<img class="card-image" src="{{card.thumbNail_image}}" alt="">
<div class="popup">
<span class="popuptext" id="myPopup" ng-if="popUpIndex==$index">A Simple Popup!</span>
</div>
<div class="card-infos">
<h2 class="card-title">{{card.contentDescription}}</h2>
</div>
</div>
</a>
And here's the change in script file:这是脚本文件的变化:
$scope.popUpIndex = 0;
$scope.modalFunction = function (ind) {
console.log(ind);
$scope.popUpIndex = ind;
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.