I know this is pretty simple but I'm so tired already and I can't seem to find the right keywords to find the solution on a search engine... I'm building a simple front-end only ecommerce website, I've already got the modal up but I need for it to show the right information depending on which product I click... How do I do this?
(我知道这很简单，但是我已经很累了，而且我似乎找不到合适的关键字来在搜索引擎上找到解决方案……我正在建立一个仅前端的简单电子商务网站，我已经找到了模态，但是我需要它来显示正确的信息，具体取决于我单击的产品...我该怎么做？)
EDIT: my bad for not putting in the code...
(编辑：我不好不输入代码...)
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="modal.css">
<title>Merlin's Potions</title>
</head>
<h3>Potions</h3>
<div class="items">
<div class="item" id="item1">
<img src="../img/aging-potion.png" alt="Potion">
<h6>Aging Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item2">
<img src="../img/bulgeye-potion.png" alt="Potion">
<h6>Bulgeye Potion -</h6> <span>$19.99</span>
</div>
<div class="item" id="item3">
<img src="../img/dragon-tonic.png" alt="Potion">
<h6>Dragon Tonic -</h6> <span>$64.99</span>
</div>
<div class="item" id="item4">
<img src="../img/love-potion.png" alt="Potion">
<h6>Love Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item5">
<img src="../img/polyjuice-potion.png" alt="Potion">
<h6>Polyjuice Potion -</h6> <span>$99.99</span>
</div>
<div class="item" id="item6">
<img src="../img/sleeping-draught.png" alt="Potion">
<h6>Sleeping Draught -</h6> <span>$14.99</span>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="../img/bulgeye-potion.png" alt="" id="modalImg1">
<div class="modalTxt" id="modalTxt1">
<h4>Aging Potion</h4>
<h5>Use/Effect:</h5>
<p>It affects one's eyes, causing them to swell</p>
<h5>Ingredients:</h5>
<ul>
<li>Beetle eyes</li>
<li>Eel eyes</li>
</ul>
<h5>Price:</h5>
<span class="modalPrice">$29.99</span>
<br>
<span class="buyBtn">ADD TO CART</span>
</div>
</div>
</div>
</html>
<script type="text/javascript">
document.querySelector('.item').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = 'flex';
document.querySelector('#modalTxt1').style.display = 'inline-block';
document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = "none";
modaltext.style.display = "none";
});
</script>
.item img{
width:50px;
}
.bg-modal{
display: none;
-ms-align-items: center;
align-items: center;
justify-content: center;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
position: fixed;
top:0;
}
.modal-content {
text-align:left;
position: relative;
border-radius:4px;
width:80%;
height:80%;
background-color:white;
}
.close {
position: absolute;
right:14px;
top:0px;
font-size:42px;
transform:rotate(45deg);
cursor: pointer;
}
.modal-content img {
width:200px;
display:none;
}
.buyBtn {
background-color:red;
padding: 9px 18px;
border-radius:4px;
color:white;
}
.modalPrice{
color:red;
}
.modalTxt{
position: absolute;
}
.modal-content{
width:60%;
}
.modal-content img{
width:56%;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
}
.modalTxt{
right:10%;
top:50px;
}
.modalTxt h4{
font-size:18pt;
}
.modalTxt h5{
font-size:18pt;
margin-top:24px;
}
.modalTxt p {
margin-top:24px;
}
.modalTxt ul {
margin-top:24px;
}
.modalPrice{
font-size:18pt;
line-height:1.5em;
}
.buyBtn{
position: absolute;
bottom:-50px;
}
ask by gabriel0369 translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
