Puedes hacerlo con la propiedad style
de CSS
y el valor none
y block
para mostrar y 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.