Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''janelamodal''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento Web
    • Desenvolvimento frontend
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets e outros ambientes
    • Desenvolvimento com Wordpress
    • Desenvolvimento de apps
    • Desenvolvimento ágil
    • Desenvolvimento de Games
    • Banco de Dados
    • Design e UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • Boteco iMasters

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 1 registro

  1. Sapinn

    Chamar janela modal para diferentes

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

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.