Jump to content
Chronic

Modal abaixo do header

Recommended Posts

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 babylon
      Ola amigos,
       
      Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento":
       
      https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g
       
      Segue imagem em anexo.
       
      Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal?
       
      Obrigado a todos.
       
       

    • By Sapinn
      Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz:
       
      CSS:
      * {   box-sizing:border-box;   font-family: Arial; } .slideshow-container {   max-width: 800px;     position: relative;   margin: auto; } .mySlides {   display: none; } .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: #4285f4;   font-weight: bold;   font-size: 28px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0;   user-select: none; } .next {   right: 0;   border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8); } .dot {   cursor: pointer;   height: 15px;   width: 15px;   margin: 10px 2px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;   transition: background-color 0.6s ease; } .active, .dot:hover {   background-color: #4285f4; } .fade {   -webkit-animation-name: fade;   -webkit-animation-duration: 1.5s;   animation-name: fade;   animation-duration: 1.5s; } .img_slide{     width: 100%;     height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .8);     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; } @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: 8px;     right: 3px;     width: 30px;     height: 30px;     font-weight: bold;     color: #4285f4;     font-size: 25px;     font-family: Arial, Helvetica, sans-serif;     cursor: pointer;     background: transparent;     border: none; } @media (max-width: 600px) {     .img_slide{         width: 100%;         height: 300px; } }  
       
      JAVASCRIPT:
      var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) {   showSlides(slideIndex += n); } function currentSlide(n) {   showSlides(slideIndex = n); } function showSlides(n) {   var i;   var slides = document.getElementsByClassName("mySlides");   var dots = document.getElementsByClassName("dot");   if (n > slides.length) {slideIndex = 1}    if (n < 1) {slideIndex = slides.length}   for (i = 0; i < slides.length; i++) {       slides[i].style.display = "none";    }   for (i = 0; i < dots.length; i++) {       dots[i].className = dots[i].className.replace(" active", "");   }   slides[slideIndex-1].style.display = "block";    dots[slideIndex-1].className += " active"; } 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'){             modal.classList.remove('mostrar');         }     });     }      } const botaoChama = document.querySelector('#botaoChama');  botaoChama.addEventListener('click',()=>{     iniciaModal('modal');      }); const botaoChama2 = document.querySelector('#botaoChama2');  botaoChama2.addEventListener('click',()=>{     iniciaModal('modal2'); });  
       
      HTML:
      <div id="modal" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide">            </div>        <div class="mySlides fade">             <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(1)"></span>          <span class="dot" onclick="currentSlide(2)"></span>          <span class="dot" onclick="currentSlide(3)"></span>        </div>   </div>    </div>  <div id="modal2" class="modal-container">           <button class="fechar">X</button> <div class="slideshow-container">          <div class="mySlides fade">              <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide">           </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp8480719.jpg"  class="img_slide">            </div>        <div class="mySlides fade">             <img src="https://wallpapercave.com/wp/wp9683280.jpg"  class="img_slide">           </div>             <a class="prev" onclick="plusSlides(-1)">❮</a>     <a class="next" onclick="plusSlides(1)">❯</a>     <div style="text-align:center">         <span class="dot" onclick="currentSlide(4)"></span>          <span class="dot" onclick="currentSlide(5)"></span>          <span class="dot" onclick="currentSlide(6)"></span>        </div>   </div>    </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
    • By Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
    • By Sapinn
      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"); });  
    • By helkton
      iai galera fiz o seguinte script pra fazer uma busca em uma tabela Mysql via php, quando o usuario digita algo em um formulario ele é disparado e faz as devidas buscas na tabela
      $('#buscarAlunoOnline').keyup(function(){ var buscarAlunoOnline = $('#buscarAlunoOnline').val(); if(buscarAlunoOnline === ""){ var qdade_result_pagina = 50; //Quantidade de Registros por pagina var pagina = 1; //pagina inicial var idLocalidade = <?php echo $unidadeTrabalho?>;//localidade de trabalho do funcionario logado var tipoLogin = <?php echo $tipoLogin?>;//tipo de funcionario logado $(document).ready(function (){ listar_alunos(pagina, qdade_result_pagina, idLocalidade, tipoLogin);//Chama funcao para mostrar resultados }); function listar_alunos(pagina, qdade_result_pagina, idLocalidade, tipoLogin){ var dados = { pagina: pagina, qdade_result_pagina: qdade_result_pagina, idLocalidade: idLocalidade, tipoLogin: tipoLogin } $.post('listar_alunos_ead_db', dados , function(data){ $('#resultAlunOnline').html(data); }); } }else{ $.post('buscar_aluno_ead', {buscarAlunoOnline: buscarAlunoOnline, idLocalidade: <?php echo $unidadeTrabalho?>, tipoLogin: <?php echo $tipoLogin?>},function(data){ $('#resultAlunOnline').html(data); }); } }); até aqui tudo bem funcionou, o usuario digita, é disparado e chama a função buscar_aluno_ead, quando a pagina é aberta sem nenhuma busca eu chamo a função listar_alunos_ead_db 
       
      agora o b.o é o seguinte eu tinha uma janela modal que se abria pra poder fazer algumas alterações e edições, que parou de funcionar devido essa coisa que fiz, antes funcionava, antes de chamar as paginas assim via javaScript, o que posso fazer pra arrumar????
×

Important Information

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