Jump to content
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!

Share this post


Link to post
Share on other 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!

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 Diego-SLP
      Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! 
       
      Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço.
       
      <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>  
    • By g.dmatos
      Preciso desenvolver um algoritmo no Visualg, da função y=3x+8, onde, a partir da informação de um valor para a variável independente x, o sistema automaticamente informe o valor da variável dependente y.
       
      porém quando vou executar da erro no código:
      var x, y: real inicio escreval("Digite o valor do coeficiente x") leia(x) Escreval ("O valor da conta é igual a:" + y) Leia (y) y=(3.x)+8 fimdoalgoritmo  
    • By Luccas Gaulia
      Ola, Não entendi ainda porque não envia via POST os dados no AJAX, vai direto para o error, e abre o Modal dizendo que houve o erro e rapidamente direciona para a página, mesmo esse modal não sendo para isso... Coloquei o Alert e ele faz a mesma coisa, abre o Alert de Error e direciona para página...
      Não estou utilizando a url:, pois o caminho é o mesma da página e mesmo utilizando, nada muda... colocando em outro php e chamando, também dá erro.
      Preciso entender sobre essa situação para enviar meus dados via POST e ajax
       
      $(document).on("click", '#updateStatusEquip', function() { $.ajax({ type: "POST", data: { value_id : $('#admin_id').val() }, success: function(data) { // Check the output of ajax call on firebug console console.log(data); $(".modal-body-info").html("Sucesso: Status do Registro alterado com sucesso"); $("#myModalMessage").modal("show"); }, error: function () { $(".modal-title").html("Erro"); $(".modal-body-info").html("Erro: Registro não foi inserido"); $("#myModalMessage").modal("show"); } }); });  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Modal - Message --> <div class="modal fade" id="myModalMessage" tabindex="-1" role="dialog" aria-labelledby="myModalMessage"> <form method="post" id="ze-form" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></h4> <button type="button" class="close" id="reloadTable" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <div class="modal-body-info"> <b>Registro de:</b><br>Jonhy<input type="hidden" name="admin_id" id="admin_id" value="2"><br><b>Têm certeza que deseja alterar o status desse registro?</b><br>Poderá não ser capaz de acessar o Sistema</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="reloadTable" data-dismiss="modal">Fechar</button> <div class="modal-footer-button"><button type="submit" name="updateStatusEquip" id="updateStatusEquip" title="Alterar..." class="btn btn-warning">Alterar <i class="fas fa-level-up-alt ze-icon-m"></i><i class="fas fa-level-down-alt ze-icon-m"></i> </button></div> </div> </div> </div> </form> </div>  
    • By mamotinho
      Olá, estou com dúvidas , eu tenho a seguinte execução 
       
      SELECT SUM(Cash) as soma FROM CashAccount Eu estou querendo pega o resultado desta consulta em PHP
      tipo
       
      $result = $pdo->query("SELECT SUM(Cash) as soma FROM CashAccount"); echo $result; Mais não sei como fazer aparece o mesmo resultado que é exibido quando eu faço a execução da query no SQL, por favor alguém poderia me informar como eu poderia está fazendo.
    • By marcelojoss
      //O valor na média (resposta) sai muito diferente, gostaria de corrigir o código próximo  a lógica que ele está.
       
       
      #include <stdio.h>
      #include <stdlib.h>
      #include <locale.h>
      double media(int vetor[], int tamanho)
      {
          float soma = 0, media = 0;
          int i = 0;
          for(i = 0; i<tamanho; i++)
          {
              soma+=vetor;
          }
          media = soma / tamanho;
          return media;
      }

      int main()
      {
          setlocale(LC_ALL, "Portuguese");
          int i, x;
          float soma;
          printf("Qual o tamanho do vetor ?\n");
          scanf("%d", &x);
          double vet[x];
          for ( i = 0; i < x; i++ )
          {
              printf ( "Valor na %d posição:\n", i +1 );
              scanf("%lf", &vet[i + 1]);
              printf("%lf",vet[i + 1]);
              soma = soma  + (vet[i + 1]);
          }
          printf("\n %f", soma);
          float resposta = media(vet, x);
          printf ("A média é: %.2f \n", resposta);
          system ("pause");
          return 0;
      }
       
        
×

Important Information

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