Chamar janela modal para diferentes

[Sapinn 0]

Gostaria de chamar a janela modal de acordo com o produto escolhido para ser excluído, eu ainda estou fazendo o front do projeto mas sei que é possível fazer isso só com javascript seria algo como chamar a janela modal de acordo com o id do produto que será trazido pelo banco de dados

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");
        });

 

[Electronic 124]

Uma forma é:

Troque troque ID do botão pra CLASSE id="botaoChama"  - >  class="botaoChama"

coloque um atributo ID com o valor sendo o ID do produto que vem do banco

EX.: <button id='3' class="botaoChama">Excluir Produto</button>

Agora ao clicar no botão, pegue o ID desse botão e mostre na MODAL. Com a mudança abaixo

const botaoChama = document.querySelectorAll('.botaoChama');
botaoChama.forEach((e) => {
  e.addEventListener('click', function(botao) {
    var prodID = botao.target.id;
    document.getElementById('produto_excluir').innerText = prodID
    iniciaModal("modal", prodID);
  });
})

pra exibir o id dentro a modal é com a linha document.getElementById('produto_excluir').innerText = prodID

e deverá ter uma tag dentro da modal com ID correspondente

 

Se for o caso faça o mesmo com a descrição do produto

[Sapinn 0]

Me salvando de novo muito obrigado. Agora se eu quisesse chamar na janela modal o nome e a marca do produto em um tag <b>

Como proceder ?

    <div id="modal" class="modal-container">

        <div class="modal-content">

            <button class="fechar">X</button>

            <h2 class="subtitulo">Tem certeza que deseja excluir <b class="nomeProdutoAqui"></b>?</h2>

            <form action="">

                <input type="text" id="id_produto">

                <fieldset>

                    <button class="btn-question btn-yes">Sim</button> <a class="link-button btn-question btn-no">Não</a>

                </fieldset>

               

            </form>

            

        </div>

    </div>

 

[Electronic 124]

Tem várias modos

A mais simples acho que é por no botão uma chamada de função já com todos os dados  

 onclick="iniciaModal(id, descrição, etc, etc)"

E lá na função usar esses dados para por no lugar desejado. 

Nesse caso não ia precisar daquela ultima função.

[Sapinn 0]

Muito obrigado de novo. Eu consegui acrescentar o nome do produto adicionando a seguinte linha na função do botaoChamar:

 

 nomeProdutoAqui.innerHTML = e.parentNode.parentNode.childNodes[1].innerHTML +" "+ e.parentNode.parentNode.childNodes[3].innerHTML;

 

Provavelmente existe algum método mais sofisticado para resolver esse problema mas como esse conseguiu resolver meu problema vou usar ele mesmo, muito obrigado pela ajuda de novo.