Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RogerioOliveiraTI

Abrir modal ao rolar a página

Recommended Posts

Olá Pessoal!

Estou querendo fazer um JS Modal como este https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal2&stacked=h  para abrir quando o usuário rolar a página para baixo.

O modal já esta pronto! ele está abrindo automaticamente quando carrega a página, mas eu quero que ele abra somente quando o usuário rolar x% da página, por exemplo 50% da página e ele abre.  

Gostaria de saber qual é a "função" que faz isso! (se é uma função?)

Meu script que dispara/chama o modal está assim!

 

<script>
    if(typeof(Storage) !== "undefined") {
      if (localStorage.popup !== "close"){
        $(document).ready(function(){
            $("#myModal").modal("show");
            localStorage.popup = "close";
            $("#myBtn").click(function(){
                $("#myModal").modal("hide");
            });          
        });
      } else{
      }
    }
    </script>

Eu sou novato nisso, peço desculpas caso não tenha sido claro, caso já exista este tópico peço que me indiquem ele ou então como devo buscar (no Google) sobre como fazer isso, não estou sabendo achar esta solução, ou outra maneira de fazer o que eu estou querendo.

Caso alguém tenha alguma outra solução "mais elegante" só me dizer.

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá pessoal, muito obrigado pelas respostas.

As 2 respostas funcionaram perfeitamente, tando do wessleysanttos quanto do angelorubinabrigado aos 2.

Segue o código de exemplo " https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal2&stacked=h  para abrir quando o usuário rolar a página para baixo".

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .modal-header, .close {
      background-color: #FF8C00;
      color:white !important;
      text-align: center;
      font-size: 30px;
    }
    .modal-footer {
      background-color: #FF8C00;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      text-align: left;
      padding: 8px;
    }

  </style>
</head>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="padding:1px 2px;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3><span></span> Modal</h3>

      </div>
      <div align="center" style="padding:5px 50px; ">

       <h2> <span style="color: orange" > Modal </span></h2>

     </div>

     <div align="center" style="padding:5px 50px;">
      <form role="form">
        <div class="form-group">
          <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
          <input type="text" class="form-control" id="usrname" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
          <input type="text" class="form-control" id="psw" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox" value="" checked>Remember me</label>
        </div>
        <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
      </form>
    </div>
  </div>
</div>
</div>

<script>
    
    $(window).on('scroll', (e) => {

      let h = Math.round(($(this).height() / 2)),
      st = $(this).scrollTop()

      if( st > h && st < h+10 ) {

        if (localStorage.popup !== "close"){ /** Saiba mais em https://www.w3schools.com/html/html5_webstorage.asp **/

           /** Chama o modal**/
          $(document).ready(function(){
            $("#myModal").modal("show");
            localStorage.popup = "close";
            $("#myBtn").click(function(){
              $("#myModal").modal("hide");

            });

          });
        } else{

        }

      }

    })


/**
    $(window).scroll(function(){ 
      if ($(this).scrollTop() >= 50) {
        if(typeof(Storage) !== "undefined") {
          if (localStorage.popup !== "close"){
            $(document).ready(function(){
              $("#myModal").modal("show");
              localStorage.popup = "close";
              $("#myBtn").click(function(){
                $("#myModal").modal("hide");

              });

            });
          } else{

          }
        }

      }
    });
    **/
  </script>

  </html>

Vlw!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por unset
      Olá, estou enfrentando um problema e ainda não consegui pensar em uma solução, como resolver o problema, eu estou mudando meu sistema para utilizar janelas modal do bootstrap 5, cadastro e edição e funciona bem, porém ao adicionar um editor de texto wysiwyg tipo ckeditor 4, tinymce, summernot, e outros nenhum deles abre o conteudo no textarea, não estou conseguindo entender o motivo, se eu retiro a chamada dos editores os dados são exibidos corretamente, se eu deixo os dados não são carregados, mais os editores abrem normal.
       
      alguem já passou por isso, tem alguma luz? obrigado desde já por qualquer ajuda.


    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por Mauricio Molina
      Ola pessoal, será que podem me dar uma força?
       
      Preciso fazer um calculo de subtração de valores, onde o administrador seleciona o mes, pego pelo ID, método GET, para edição.
       
      Como normalmente tem vários meses pagos, o script a seguir só esta funcionando no primeiro item da tabela.
       
      Como posso fazer para funcionar em todos os itens da tabela?
       
      Teria que dar um nome diferente no getValor (id no HTML) para cada um, mas como posso fazer isso?
       
      <!-- Calculo Devolucao--> <script type="text/javascript"> function id(valor_campo) { return document.getElementById(valor_campo); } function getValor(valor_campo) { var valor = document.getElementById(valor_campo).value.replace(',', '.'); /*document.write("Valor: " - valor);*/ return parseFloat( valor ) * 1; } function sub() { var total = getValor('v_recebido') - (getValor('v_devolvido')); id('resultadoDev').value = (total * 1) .toFixed(2, "."); } </script> <!-- Calculo Devolucao--> <div class="toggle"> <input name="v_devolvido" type="checkbox" id="foo<?php echo $rows_aluno['id']; ?>" value="<?php echo $rows_aluno['v_recebido']; ?>"> <label for="foo<?php echo $rows_aluno['id']; ?>"></label> </div> <input type="text" id="v_recebido" value="<?php echo $rows_aluno['v_recebido']; ?><?php echo $rows_aluno['v_receb_parc']; ?>" onblur="sub()" > <div class="form-row"> <div class="form-group col-md-6"> <label for="validationCustomUsername">Valor Parcial:</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">R$</span> </div> <input name="v_dev_parc" type="text" class="form-control" id="v_devolvido" placeholder="Digite o Valor" aria-describedby="inputGroupPrepend" onblur="sub()"> </div> </div> <input name="id_user" type="hidden" value="<?php echo $rows_aluno['id_user']; ?>"> <input name="id_prof" type="hidden" value="<?php echo $rows_aluno['id_prof']; ?>"> <input name="status" type="hidden" value="Devolvido"> <input name="mes" type="hidden" value="<?php echo $rows_aluno['mes']; ?>"> <input name="v_recebido" type="text" id="resultadoDev"> </div>  
    • Por mateus.andriollo
      Boa tarde,
      Tenho alguns campos numéricos q ao fazer uma select gostaria q retornasse uma legenda
       
      exemplo:
      Status: 0=Inativo / 1=Ativo Condição: 1=Funcionando / 2=Em manutenção / 3=Manutenção Interna   
      Seria algo assim, tenho varias tabelas com estes campos... mas tenho q ficar usando replace.
      Existe uma forma de criar uma função para isso? Nem q na função eu tenha que setar nome do campo, ficando assim:
      Legenda('Status',cadastro.status) 
    • Por 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.
       
       

×

Informação importante

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