3

Tenho uma div que na verdade é um modal do Bootstrap 4. O que eu quero é que quando o usuário clicar no botão, o scroll desça até o final dessa div, para que a mensagem do alertSuccess() seja exibida corretamente para o usuário. Até o momento quando o usuário clica no botão, o modal cobre a mensagem de sucesso, que está fixa na parte de baixo da tela. Por isso preciso que a página desça. Gostaria de fazer isso com javascript.

 <form method="post" action="recebeDados.php" class="form_comment" id="form_comment<?= $row['product_id'] ?>" name="<?= $row['product_id'] ?>">
        <h2 class="text-center text-muted" style="font-size: 18px;">Deixe um comentário:</h2>
      <div class="form-group">
        <input class="form-control" type="name" name="nome" id="nome" value="<?= $_SESSION['nome'] ?>">
      </div>
      <div class="form-group">
        <textarea class="form-control" type="comentario" name="comentario" id="comentario" placeholder="Digite aqui seu comentário" required></textarea>
      </div>
      <input class="form-control" type="hidden" value="<?= $_SESSION['id_usuario'] ?>" id="id_usuario" name="id_usuario">
      <input class="form-control" type="hidden" value="<?= $row['product_id'] ?>" id="product_id" name="product_id">
      <div class="form-group">
        <input type="submit" onclick="alertSuccess()" class="btn btn-info mx-0 mx-auto text-center" name="submit" value="Comentar"> <!--- BOTÃO -->
      </div>
  </form>


<script type="text/javascript" language="Javascript">
      function alertSuccess()
      {
               const Toast = Swal.mixin({
  toast: true,
  position: 'bottom',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})

Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
})
      }
      
  </script>
  

2 Respostas 2

0

A caixa do Sweetalert deveria aparecer normalmente por cima da modal, já que ela é criada no final do body, como mostra o print abaixo:

inserir a descrição da imagem aqui

Se no seu caso o alerta está ficando por baixo da modal, pode ser que alguma coisa no seu CSS está causando isso.

Para resolver o problema não é preciso recorrer ao que está fazendo, fixando o alerta na parte de baixo da tela para depois fazer um scroll. Isso não é a melhor ideia, ao meu ver.

Você pode muito bem deixar o alerta centralizado alterando o valor do position: 'bottom' para position: 'center' nas configurações do alerta e colocar um z-index com um valor alto suficiente para que o alerta fique por cima da modal.

A caixa do alerta possui a classe .swal2-container (considerando que esteja usando a versão 2 do componente), então basta colocar no seu CSS:

.swal2-container{
   z-index: 99999 !important;
}

Repare que coloquei um valor alto de 99999 o que já pode ser suficiente, e o !important é para sobrescrever o CSS que o componente injeta na página.

6
  • Não funcionou, nada acontece
    – user161169
    Commented 24/01/2020 às 0:31
  • Dâ uma olhada acrescentei algumas informações no código da pergunta.
    – user161169
    Commented 24/01/2020 às 0:35
  • Vê só, quando o usuário clica em submit, aparece o alert do Swal. Só que esse alert está aparecendo atrás do modal, eu poderia até colocar um z-index no CSS, mais o Swal é no javascript. Então a forma que achei de contornar isso foi, dá um padding-bottom no modal do bootstrap, e exibir o Swal fixo no bottom. Mais para o usuário ver o Swal ele precisa descer toda página, então queria fazer isso automaticamente, quando ele clicasse no input.
    – user161169
    Commented 24/01/2020 às 0:53
  • Sim está dentro de uma modal, vou colocar uma imagem na pergunta.
    – user161169
    Commented 24/01/2020 às 1:23
  • Alterei a resposta. Dá uma olhada.
    – Sam
    Commented 24/01/2020 às 3:43
0

Para rolar a página você pode utilizar os métodos scrollBy() e scrollIntoView().

O scrollBy(x, y) é um método que recebe como parâmetro a posição X e Y de onde você quer rolar a página. Logo, basta obter a posição da sua div e descer usando este método, veja o exemplo abaixo:

window.scrollBy(800, 1300);  // Rola até a posição X: 800 Y: 1300

Já o método scrollIntoView() recebe um elemento como argumento, fazendo com que a página role até este elemento. Veja esse exemplo abaixo:

element = document.getElementsByTagName("h1")[0];
element.scrollIntoView();

1
  • scrollBy(). até funcionou, porém todo o scroll desce até o final da página, não do modal, o modal continua intacto.
    – user161169
    Commented 24/01/2020 às 0:33

Você deve fazer log-in para responder a esta pergunta.