Skip to main content
se añadieron 19 caracteres en el cuerpo
Origen Enlace
MR Dev
  • 839
  • 7
  • 21

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.

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

Esto permitirá abrirlo y cerrarlo cuantas veces se necesite.

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.

Origen Enlace
MR Dev
  • 839
  • 7
  • 21

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

Esto permitirá abrirlo y cerrarlo cuantas veces se necesite.