Call modal window for each through id

Asked

Viewed 19 times

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

    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" and document.querySelector('.botaoChama')

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.