Jump to content
RogerioMartins

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 Icaro Luan
      error
    • By calinthians
      Olá pessoal, estou criando um sistema de portfólios e fiz tudo funcionar sem PHP, quando transformei o sistema em dinâmico não está mais abrindo o modal de cada portfólio qd clica nele, sendo que eu inspecionei a página e está pegando os valores corretos na ID, só não está abrindo mesmo, e outro modal sem o PHP continua abrindo normalmente.
       
       
      <section id="portfolio"> <div class="container"> <div class="text-center"> <h3 class="section-heading">Portfólio</h3> </div>   <ul id="port-group"> <?php while($dado = mysqli_fetch_assoc($consulta) ) { ?> <li> <div class="portfolio-item"> <a href="#portmodal<?php echo $dado['id']; ?>" class="portfolio-link" data-toggle="modal"> <div class="portfolio-hover"> <div class="portfolio-hover-content pagport"> <i class="fa fa-plus fa-3x"></i> </div> </div> <div class="portfolio-responsive idportimg1"> <style>.idportimg1 {background-image: url("img/bg.png")}</style> </div> </a>   <div class="portfolio-caption"> <h5><?php echo $dado['titulo']; ?></h5> <p class="text-muted"><?php echo $dado['subtitulo']; ?></p> </div> </div> </li>   <!-- Portfolio Modal --> <div class="portfolio-modal modal fade" id="portmodal<?php echo $dado['id']; ?>>" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-2"> </div> <div class="col-lg-8"> <div class="modal-body"> <h3><?php echo $dado['titulo']; ?></h3> <img class="img-responsive img-centered" src="img/portfolio/site1.jpg" alt=""> <p><?php echo $dado['descricao']; ?></p> <img class="img-responsive img-centered" src="img/portfolio/site11.jpg" alt=""> <ul class="list-inline"> <li><?php echo $dado['datax']; ?></li> <li><?php echo $dado['cliente']; ?></li> <li><?php echo $dado['categoria']; ?></li> </ul> <button type="button" class="btn-close" data-dismiss="modal"><i class="fa fa-times"></i> Fechar</button> </div> </div> <div class="col-lg-2"> </div> </div> </div> </div> </div> </div> <?php } ?> </ul> </div> </section>
    • By AlexandrePrezzi
      Seguinte:
       
      Em um arquivo  teste.php  tem  um monte de coisas e  também tem um modal la pelo meio.
      <div class="modal fade" id="myModalDadosBasicos" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_DadosBasicos" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel_DadosBasicos"></h4> </div> <div class="modal-body"> .... Em outro arquivo  "principal.php"   criei um botão.
       
      Gostaria de saber como posso far para quando eu clicar nesse botao,  abrir o modal que esta no outro arquivo.
       
      Codigo do botão
      <button type="button" title="Abre Modal" class="btn btn-xs btn-success tp btnAbreModal">Transformar em Pedido Novo</button> O que eu tentei fazer baseado em dicas de outros:
       
      $('.btnAbreModal').on('click', function(e){ $.ajax({ type: 'POST', //Caminho do arquivo do seu modal url: 'teste.php', success: function(data){ alert(data); $('#myModalDadosBasicos').modal('show'); } }); }); A questão é .... como defino que o que eu quero abrir na minha  página  seja somente o modal "myModalDadosBasicos".
    • By FMonteiro
      Estou com um problema na chamada de uma função criada em uma classe. 
      Ao fazer a chamada da função, recebo uma mensagem de que a função não existe. 
      A mensagem de erro é: 
      "Fatal error: Uncaught Error: Call to undefined function EXECUTAR() in C:\...\cls_bd.php:154 Stack trace: #0 C:\...\cls_mail.php(99): bd->INSERIR('tbmensagens', 'data,hora,nome,...', 'DATE_FORMAT((se...', NULL) #1 C:\...\cls_mail.php(108): GRAVAR_EMAIL('Empresa Produto...', 'lu@gmail.com', '3230833394', 'Nome: Empresa P...') #2 C:\...\cls_contato.php(31): ENVIAR_GRAVAR_EMAIL('Empresa Produto...', 'lu@gmail.com', '3230833394', 'Nome: Empresa P...') #3 {main} thrown in C:\...\cls_bd.php on line 154"
      Na foto em anexo, há o script criado com a chamada da função (linha 154) e da função criada (linha 123).
      Será que alguém pode jogar uma luz no assunto para mim?

    • By VCastilho
      Bom Dia
      Consegui da seguinte forma, mas com faço para que o código selecionado substitua o antigo?

       
      <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <body> </html>  
×

Important Information

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