0
I am building a system and I have a product table, each product has a button that can exclude, what I would like to do is call an individual modal according to product that Adm would like to exclude. In this system, I’m still on the front and I intend to use php on the back, however, I know it is possible to call these modals individually through javascript just do not know how to build the code to do such a thing someone could please help me?
CSS:
.modal-container{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0px;
left: 0px;
z-index: 2000;
display: none;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.modal-container.mostrar{
display: flex;
}
.modal-content{
background: #fff;
width: 30%;
min-width: 300px;
padding: 30px;
border: 10px solid #988b7a;
box-shadow: 0 0 0 10px #fff;
position: relative;
}
.btn-question{
color: #fff;
border-radius: 8px;
border: none;
width: 120px;
height: 60px;
font-size: 18px;
cursor: pointer;
margin-left: 10%;
transition: .8s;
}
.btn-yes{
background-color: #4caf50;
}
.btn-yes:hover{
background-color: #50dd55;
}
.btn-no{
background-color:#db4437;
}
.btn-no:hover{
background-color: #f53625;
}
@keyframes modal{
from{
opacity: 0;
transform: translate3d(0, -60px, 0);
}
to{
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.mostrar .modal-content{
animation: modal .3s;
}
.fechar{
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #fff;
background: red;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
HTML:
<table class="tabela-padrao" border="1px">
<thead>
<tr>
<th>Produto</th>
<th>Marca</th>
<th>Quant</th>
<th>Preço</th>
<th>Excluir</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mouse</td>
<td>Multilaser</td>
<td>2</td>
<td>50,00</td>
<td><button id="botaoChama">Excluir Produto</button></td>
</tr>
<tr>
<td>Teclado</td>
<td>Multilaser</td>
<td>2</td>
<td>50,00</td>
<td><button id="botaoChama">Excluir Produto</button></td>
</tr>
<tr>
<td>Fone</td>
<td>Multilaser</td>
<td>2</td>
<td>50,00</td>
<td><button id="botaoChama">Excluir Produto</button></td>
</tr>
</tbody>
</table>
<div id="modal" class="modal-container">
<div class="modal-content">
<button class="fechar">X</button>
<h2 class="subtitulo">Tem certeza que deseja excluir esse produto?</h2>
<button class="btn-question btn-yes">Sim</button> <button class="btn-question btn-
no">Não</button>
</div>
</div>
JS:
function iniciaModal(modalID){
const modal = document.getElementById(modalID);
if(modal){
modal.classList.add('mostrar');
modal.addEventListener('click',(e)=>{
if(e.target.id == modalID || e.target.className == 'fechar' || e.target.className == 'btn-question btn-no'){
modal.classList.remove('mostrar');
}
});
}
}
const botaoChama = document.querySelector('#botaoChama');
botaoChama.addEventListener('click',()=>{
iniciaModal("modal");
});
you have 3 buttons with the same id "Call button". the id should be single, so it’s an id (identifier), use a class to assign the event to more than one button, for example
class="botao-chama"
anddocument.querySelector('.botaoChama')
– Ricardo Pontual