javascript - mensajes - bootstrap alert modal

Bootstrap Alert Auto Cerrar

Question

Mi necesidad es llamar a alerta cuando hago clic en el botón Agregar a la lista de deseos y debería desaparecer la alerta en 2 segundos. Así es como lo intenté, pero la alerta desaparece instantáneamente tan pronto como aparece. No estoy seguro, donde está el error ... ¿Alguien puede ayudarme?

JS Script

  $(document).ready (function(){
            $("#success-alert").hide();
            $("#myWish").click(function showAlert() {
                $("#success-alert").alert();
                window.setTimeout(function () { 
                            $("#success-alert").alert(''close''); }, 2000);               
                  });       
                    });

Código HTML:

<div class="product-options">
    <a  id="myWish" href=""  class="btn btn-mini" >Add to Wishlist </a>
    <a  href="#" class="btn btn-mini"> Purchase </a>
</div>

Cuadro de alerta:

<div class="alert alert-success" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>

Answer 1

El uso de un fadeTo() que se está desvaneciendo a una opacidad de 500 en 2 segundos en el código "I Can Has Kittenz" no es legible para mí. Creo que es mejor usar otras opciones como un retraso ()

$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert(''close'');
});

Answer 2

Encontré que esta es una mejor solución

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert(''close'');
});

Answer 3

Para un deslizamiento suave:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

Fiddle

Answer 4

Por qué todas las demás respuestas usan slideUp está más allá de mí. Como estoy usando el fade y las clases para hacer que la alerta se desvanezca cuando se cierra (o después del tiempo de espera), no quiero que se "deslice hacia arriba" y no coincida con eso.

Además, el método slideUp ni siquiera funcionó. La alerta en sí misma no se mostró en absoluto. Esto es lo que funcionó perfectamente para mí:

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

Answer 5

Tiggers automática y manualmente cuando sea necesario

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}

Answer 6

una solución más para esto Cierre o desvanezca automáticamente el mensaje de alerta de arranque después de 5 segundos:

Este es el código HTML utilizado para mostrar el mensaje:

<div class="alert alert-danger">
This is an example message...
</div>

JS Snippet

<script type="text/javascript">

$(document).ready(function () {
 
window.setTimeout(function() {
    $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
        $(this).remove(); 
    });
}, 5000);
 
});
</script>

Answer 7

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert(''close'');
});

Donde los parámetros de fadeTo son fadeTo (velocidad, opacidad)