2

estou tentando fechar um alerta automaticamente após o usuário realizar cadastro/login.

O alerta está funcionando numa boa, assim que a consulta no Banco de Dados é realizada o alerta aparece na tela.

Porém eu gostaria que o alerta sumisse mesmo que o usuário não o feche.

Meu código está assim:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <!-- CADASTRO SUCESSO -->
  <?php
  if($_SESSION['status_cadastro']):
  ?>
  <div class="modalBanner d-flex justify-content-center" role="alert">
    <div class="alert alert-success">
      <strong>Cadastro efetuado!</strong>&emsp;Faça login informando seu e-mail e senha.&emsp;
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
  </div>
  <?php
  endif;
  unset($_SESSION[status_cadastro]);
  ?>
  <!-- E-MAIL EM USO -->
  <?php
  if($_SESSION['usuario_existe']):
  ?>
  <div class="modalBanner d-flex justify-content-center" role="alert">
    <div class="alert alert-danger">
      Este e-mail já está em uso. Utilize-o para login ou informe outro.&emsp;
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
  </div>
  <?php
  endif;
  unset($_SESSION[usuario_existe]);
  ?>
</div>

Eu tentei utilizar o seguinte JavaScript:

$(document).ready(function() {
  // show the alert
  setTimeout(function() {
    $(".modalBanner").alert('close');
  }, 2000);

});

Porém ainda não obtive sucesso. O alerta só é mostrado após o php consultar os e-mails no banco de dados.

1 Resposta 1

2

Opa, então, não tem como fazer isso que você quer, fechar esse alert que estaria no browser. Como referência peguei esse link no SO da gringa: https://stackoverflow.com/questions/463368/javascript-close-alert-box

O que você pode fazer, e na minha opinião é ate melhor, por ser mais moderno e ter uma usabilidade melhor é criar um alerta no html mesmo e manipulá-lo, daí você fechar ele automaticamente quando bem entender.

    $('#cadastro').click(function() { 
        $('#alert').fadeIn(300)

        setTimeout(function() {
            close()
        }, 2000)
    })

    $("#close").click(() => close())
          
    function close() {
        $('#alert').fadeOut(200)
    }
    #alert {
        display: none;
        position: absolute;
        left: 35%;
        width: 20%;
        border: 1px solid black;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
    }

    #alert .footer {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #aaa;
    }
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <button id="cadastro">
        Cadastrar
    </button>
    <div id="alert">
        Cadastro efetuado com sucesso :)
        <div class="footer">
            <button id="close">OK</button>
        </div>
    </div>

Taí um exemplo bem feio mas funcional, espero ter ajudado!!

2
  • Cara, desculpa a demora. Marquei a sua resposta como aceita. Alguém me deu markdown, se puder me dar uma moral e der um útil te agradeço. Valeu!!
    – ARNON
    Commented 22/01/2021 às 3:16
  • 1
    ok, vou marcar aqui Commented 22/01/2021 às 20:55

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .