Abrir modal ao rolar a página

RogerioOliveira · Fevereiro 28, 2017

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>

Resolvido!

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>

Editado Março 4, 2017 por RogerioMartins
Resolvido

Entrar

Abrir modal ao rolar a página

Pergunta

RogerioOliveira

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades