0

tengo un detalle con una alerta Bootstrap.

cuando hago un registro muestro una alerta de registro exitoso, el cual solo se muestra y desaparece en cierto tiempo pero cuando vuelvo a realizar otro registro la alerta ya no aparece. en pocas palabras la alerta solo aparece una sola vez.

$(window).ready(function(){
    $("#boton").click(function(){
        
    $("#ok").removeClass("hidden");
          setTimeout(function(){
              $("#ok").fadeOut(3000);
              },3000);
              
    });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<button id='boton'>Registrar</button>

<div id="ok" class="alert alert-success hidden" role="alert">registrado exitosamente! <i class="fa fa-check-circle" aria-hidden="true"></i>
</div>

0

1 respuesta 1

0

Puedes hacerlo con la propiedad style de CSS y el valor none y block para ocultar y mostrar el alert.

$(window).ready(function () {
  $("#boton").click(function () {
    var x = document.getElementById("ok");
    x.style.display = "block";
    setTimeout(function () {
      $("#ok").fadeOut(3000);
    }, 3000);
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id='boton'>Registrar</button>

<div id="ok" class="alert alert-success" style="display:none" role="alert">registrado exitosamente! <i class="fa fa-check-circle" aria-hidden="true"></i>
</div>

Y en el class del div quita hidden y agregar style="display:none" para que permanezca oculto y solo al presionar el botón se visualice y oculte en 3 segundos con setTimeout().

Esto permitirá abrirlo y cerrarlo cuantas veces se necesite.

1
  • 1
    Muchas Gracias.. si me funciono
    – Ferns
    Commented el 26 jul. 2021 a las 21:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.