Jump to content

POWERED BY:

Sapinn

Chamar janela modal para diferentes

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • By belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • By violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • By violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • By violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.