Auto Close Alert after consultation in the Database

Question

I am trying to close an alert automatically after the user performs registration/login.

The alert is working in a good, as soon as the query in the Database is held the alert appears on the screen.

But I would like the alert to disappear even if the user does not close it.

My code is like this:

<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>

I tried using the following Javascript:

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

});

But I have not yet succeeded. The alert is only shown after the php check the emails in the database.

Answer 1

Opa, then, there is no way to do that you want, close this Alert that would be in the browser. As reference I took this link in the gringa’s OS: https://stackoverflow.com/questions/463368/javascript-close-alert-box

What you can do, and in my opinion is even better, for being more modern and having a better usability is to create an alert in the same html and manipulate it, hence you close it automatically when you want.

    $('#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>

Here’s an ugly but functional example, I hope I helped!!