Jump to content

Recommended Posts

Olá amigos estou quebrando a cabeça pra fazer um poupup MODAL para por no meu site já tentei de diversas formas e não encontro um jeito de fazer

é basicamente o seguinte a proposta quero que assim que iniciar o site vai abrir uma IMAGEM no caso propaganda e teria um X na imagem aonde a pessoa iria clicar e a imagem desaparecia porém não vai de forma alguma, encontrei alguns modelo na internet porém ele não é da forma que faz minha necessidade a pessoa tem que clicar para aparecer tipo um show/hiden queria algo automático

Share this post


Link to post
Share on other sites
19 horas atrás, Worn disse:

Olá amigos estou quebrando a cabeça pra fazer um poupup MODAL para por no meu site já tentei de diversas formas e não encontro um jeito de fazer

é basicamente o seguinte a proposta quero que assim que iniciar o site vai abrir uma IMAGEM no caso propaganda e teria um X na imagem aonde a pessoa iria clicar e a imagem desaparecia porém não vai de forma alguma, encontrei alguns modelo na internet porém ele não é da forma que faz minha necessidade a pessoa tem que clicar para aparecer tipo um show/hiden queria algo automático

 

Tem certeza que quer colocar algo em sua página, cujo um visitante vai acessar e ver aquilo e clicar no X do navegador sem mesmo olhar o conteúdo do seu site?

Eu elejo isso como a pior prática na web.

Fora que já exitem blocks no Mozilla e no Opera que simplesmente cancelam o javascript impedindo se site de funcionar corretamente.

No momento não achei isso, mas também já vi uma discussão sobre o bloqueio desse tipo de coisa para as próximas atualizações do chorme.

 

Não seria mais atrativo colocar o(s) anúncio(s) em uma div ao canto, se a pessoa tiver interessada vai olhar e não forçar-la ao que ele não quer saber.

 

Bem isso é muito fácil de fazer.

Primeiro:

Crie a div.modal, ela deve sobrepor (a propiedade z-index e position: absolute resolve) o conteúdo do site, para que quando o site carregue ela já cubra o conteúdo

 

Botão fechar:

<div class="modal" style="height: 300px; width: 300px; background: black; z-index: 1; position: absolute; top: 0">
    <button onclick="fechar();">Fechar</button>
    <br>
    Conteúdo aqui dentro personalizado da forma que bem entender
</div>

<script>
    function fechar() {
        var $divFecha = document.querySelector(".modal");

        $divFecha.style.display = 'none';
        return false;
    }
</script>

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites

Obrigado meu brother era dessa forma mesmo que eu estava atrás, obrigado mesmo cara salvou muito só vou fazer minha personalização agora

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 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????
    • By helkton
      Boa galera estou com um B.O aqui, seguinte....
       
      Tenho uma janela MODAL com itens do cardápio que será escolhido pelo cliente.
      Cada item que o cliente escolhe abro uma janela MODAL com os itens extras disponíveis ele clica nos devidos itens extras que ele quiser adicionar ao pedido até aqui tudo bem já consegui esta abrindo normal tudo certinho os itens com os itens extras disponíveis, porem como somar os itens extras juntamente com o valor do ITEM PEDIDO, tipo, o cardápio do estabelecimento possui 4 itens
      X-TUDO - R$ 15,00 X-FRANGO - R$ 12,00 X-BACON - R$ 13,00 X-SALADA - R$ 10,00 AGORA em cada item selecionado existe os itens extras que o cliente pode escolher como adicional tipo:
       
      CALABRESA - R$ 1,00 FRANGO - R$ 1,00 BACON - R$ 1,00 PRESUNTO - R$ 1,00 MUSSARELA - R$ 1,00 Então como somar esses itens extras selecionados ao valor do item pedido, tipo o usuário escolhe o X-TUDO - R$15,00 - - - -  Abro uma janela MODAL com os itens extras disponíveis e o usuário escolhe os itens extras CALABRESA + BACON + MUSSARELA 
      e vai somando ao valor do item ( R$15,00 + 1,00 + 1,00 + 1,00 ) = R$18,00
       
      Tenho esta estrutura....
      <script> $(document).ready(function() { calcTotal(); var limpaValor = ""; document.getElementById("zerarValor").innerHTML = limpaValor; document.getElementById("check").checked = false; $('.price-variant, .price-variant-text').change(function() { calcTotal(); }); $('.price-variant-text').keyup(function() { calcTotal(); }); }); function calcTotal() { var total = 0; $('.price-variant').each(function() { var isChecked = $(this).is(':checked'); if(!!isChecked) { total += Number($(this).val()); } }); $('.price-variant-text').each(function() { total += Number($(this).data('unitprice')) * Number($(this).val()); }); $('.total').text('R$ ' + total.toFixed(2)); } </script> porém não consigo fazer ele zerar o valor total a cada MODAL e nem os checkboxes marcados aberto.
      Tipo eu escolho o X-TUDO e marco os itens extras (CALABRESA + BACON + MUSSARELA) agora quando abro o outro item(outra janela modal) X-FRANGO os valores marcados anteriormente estão sendo somados
    • By lezão
      Boa noite!
      Td bem com vcs?
      Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo.
      Ja fiz de tudo e nada resolveu alguém pode me ajudar?
      Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar.
      segue o codigo abaixo:
      <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
    • By Matheus Bispo
      Boa tarde colegas programadores, estou com uma dúvida tremenda.
       
      Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado?
       
      Segue abaixo o meu código:
       
      <!DOCTYPE html>  
       <html>
            <head>  
                 <title>Clientes</title>
                 <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" />
                 <form name="formulario" method="POST" action="">
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
                 <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
                 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
                 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                 <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
                     <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="../assets/js/bootstrap.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script type="text/javascript">
                  function Ir(pagina){
                    document.formulario.action = pagina
                    document.formulario.submit();
                  }
                </script>
            </head>  
      <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false"
        onMouseOver="window.status='..message perso .. '; return true;">
                 <div class="container">
                     
                      <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center>
                      <br />
                  <?php
                     if(!empty($Dados["btnNovoCad"])):
                         $NovoCad = new CreateCliente();
                         unset($Dados["btnNovoCad"]);
                    $Dados["cli_garagem"] = $_SESSION["id-garagem"];
                         $NovoCad->exeCreate('clientes', $Dados);
                         echo $NovoCad->getMsg();
                     endif;
                     ?>
                      <div class="table-responsive">  
                           <table id="employee_data" class="table table-striped table-bordered">  
                                <thead>  
                                     <tr>  
                                          <td>ID</td>  
                                          <td>Nome</td>
                                          <td>Ações</td>
                                     </tr>  
                                </thead>
                                <?php
                                  $ChamarLeitura = new ReadCliente();
                                  $ChamarLeitura->LerClientes();
                                 foreach($ChamarLeitura->getResultado() as $clientes){
                                       extract($clientes);
                                     echo '  
                                     <tr>  
                                         <td>'.intval($cli_id).'</td>                                      
                                          <td>'.utf8_decode($cli_nome).'</td>
                                          ';?>
                                          <td>
                                              <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button>
                                          </td>                                   
                                     </tr>    
                                   <?php
                                  }  
                                ?>
                           </table>  
                      </div>  
                 </div><br>
              <center>
                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button>
                  <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br>
              </center>
       
      <!-- Inicio Modal Novo Cadastro -->
      <div class="modal fade" data-backdrop="static" id="myModalNovo">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br>
                           *Campos obrigatórios
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
      <!-- Inicio Modal Editar Cadastro -->
        <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br>
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                      <input type="hidden" name="id-cliente" id="id-cliente" value="">
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
        <script type="text/javascript">
          $('#myModalEdit').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var recipientnome = button.data('whatevernome')
            var modal = $(this)
            modal.find('.modal-title').text('Editar Cliente')
            modal.find('#id-cliente').val(recipient)
            modal.find('#cli_nome').val(recipientnome)
            
          })
        </script>
         </form>
        </body>
       </html>  
       <script>  
       $(document).ready(function(){  
            $('#employee_data').DataTable();  
       });  
       </script>
×

Important Information

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