Estoy usando twitter bootstrap framework CSS (que es fantástico). Algunos mensajes de usuarios estoy mostrando el uso de las alertas de Javascript JS y CSS.

Para los interesados, se puede encontrar aquí: http://getbootstrap.com/javascript/#alerts

Mi problema es este; después de haber mostrado una alerta para que un usuario me gustaría que sólo desaparece después de algún intervalo de tiempo. Basado en twitter docs y el código que he mirado a través de este aspecto es que no se cuece en:

  • Mi primera pregunta es una petición de confirmación de que este es, de hecho, NO se cuece en Bootstrap
  • En segundo lugar, ¿cómo puedo conseguir este comportamiento?

10 Comentarios

  1. 108

    Llamar de la ventana.setTimeout(function, retraso) le permitirá lograr esto. Aquí un ejemplo en el que se cerrará automáticamente la alerta 2 segundos (o 2000 milisegundos) después de que se muestre.

    $(".alert-message").alert();
    window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

    Si quieres envolver en una ingeniosa función usted podría hacer esto.

    function createAutoClosingAlert(selector, delay) {
       var alert = $(selector).alert();
       window.setTimeout(function() { alert.alert('close') }, delay);
    }

    Entonces usted podría utilizar como así…

    createAutoClosingAlert(".alert-message", 2000);

    Estoy seguro de que hay más elegantes maneras de lograr esto.

    • Hola jesse gracias! el setTimeout funciona y voy a seleccionar una solución válida, pero parece que el comportamiento debe ser de hecho al horno en la que los conocimientos tradicionales Kocheran declaró (y registra).
    • He mirado el twitter bootstrap código y no veo ninguna de apoyo para la auto-cierre de las alertas.
    • Sí — im esperando en los conocimientos tradicionales respuesta del porque de su mensaje aquí suena como el cierre automático de la funcionalidad debería ser y no es … pero el informe de fallo en github no hace referencia a eso.
    • Sí que estamos no pretenden ser capaz de cierre automático de alertas, sólo para ser capaz de t mediante programación cerca de ellos con el plugin de jQuery. es decir $('#myAlert').alert('close') no funciona como se anuncia.
    • Puede que desee ampliar jQuery y el envío que el método fuera el objeto, como: $('#my_fancy_alert').createAutoClosingAlert(2000). Usted sólo necesita pasar $(this).remove() o $(this).alert('close') en setTimeout de devolución de llamada.
    • Gracias! Esto funciona muy bien! SUGERENCIA: si desea lograr una buena transición con prácticamente ningún trabajo adicional, usted puede agregar las clases de «fade in» a la alerta widget.
    • En lugar de todo esto no debe ser una propiedad como «auto-ocultar». aaah
    • Para los que tengan problemas con el alert('close'), pruebe a establecer data-target=<divid> en la alerta titular div
    • Mirando a su alrededor para la solución, tal vez podamos usar este : nijikokun.github.io/bootstrap-notificar
    • Puede confirmar esto funciona con bootstrap 4 alertas. Todo lo que usted necesita hacer es cambiar ".alert-message" a ".alert" para el primer ejemplo y funciona perfectamente.

  2. 99

    Yo no podía llegar a trabajar con alerta.(‘cerca de’) tampoco.

    Sin embargo estoy usando esta y funciona de maravilla! La alerta se desvanecen después de 5 segundos, y una vez pasado, el contenido de abajo se desliza hacia arriba a su posición natural.

    window.setTimeout(function() {
        $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, 5000);
    • Sin duda una gran solución. La alerta se difumina muy bien después de un corto intervalo de tiempo. Se ve muy profesional.
    • Trabajo rápido y grande en verdad.
    • ¿Esto tiene que ser llamado cada vez que la alerta se muestra, o funciona de forma automática para todas las alertas con clase .alert-message? Tiene problemas, el de la clase en mi BS3 alerta alert alert-danger alert-block, por lo que debo usar .alert, alert-danger, o el nombre de clase completo en la función de tiempo de espera?
    • Decirlo de esta manera: $(".alert-message,.alert-danger,.alert-info") y así sucesivamente. Usted tiene que averiguar si lo quieres en tu sitio web completo o no. Si lo quieres en cada página, por ejemplo, en Laravel la cuchilla que usted puede usar algo como @include(‘scripts-alertas’) o @yield(‘alertas’). Usted tiene que averiguar o preguntar a una pregunta específica en stackoverflow y no aquí…
    • Sí, este es un interesante! Trabajó mucho para mí, y es una pequeña cantidad de código +1.
    • La mejor manera de hacer esto. Debe marcar la respuesta correcta @Mario Zigliotto desde otros elementos deslice lentamente, y no cambian su posición de inmediato. Que parece mucho más bonito y profesional.
    • Esto funciona con Bootstrap 4, y usted puede hacer esto mediante el cambio de ".alert-message" a ".alert".

  3. 4

    Tuve este mismo problema al intentar manejar las alertas de detonación y la decoloración de ellos. He buscado en torno a diversos lugares y encontré este ser mi solución. Adición y eliminación de la ‘en’ clase solucionado mi problema.

    window.setTimeout(function() { //hide alert message
        $("#alert_message").removeClass('in'); 
    
    }, 5000);

    Cuando se utiliza .remove() y de manera similar la .alert(‘cerca de’) solución me parecía golpear a un problema con la alerta ser eliminado del documento, por lo que si quería usar el mismo alerta div otra vez me fue imposible. Esta solución significa que la alerta es reutilizable sin actualizar la página. (Yo estaba usando aJax para enviar un formulario y presentar información al usuario)

        $('#Some_Button_Or_Event_Here').click(function () { //Show alert message
            $('#alert_message').addClass('in'); 
        });
  4. 3

    El uso de «cerrar» en la acción de alerta no trabajo para mí, ya que elimina la alerta de la DOM y necesito la alerta varias veces (yo soy la publicación de los datos con ajax y me muestre un mensaje al usuario en cada post).
    Así que he creado esta función que crea la alerta cada vez que lo necesito y, a continuación, inicia un temporizador para cerrar la alerta creada. Me pasan a la función de la id del contenedor al que quiero anexar la alerta, el tipo de alerta (‘éxito’, ‘peligro’, etc.) y el mensaje.
    Aquí está mi código:

    function showAlert(containerId, alertType, message) {
        $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
        $("#alert" + containerId).alert();
        window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
    }
  5. 2

    Este es el coffescript versión:

    setTimeout ->
     $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
    ,5000
  6. 2

    Con cada una de las soluciones más arriba, me siguió a perder la re-usabilidad de la alerta. Mi solución fue la siguiente:

    Sobre la carga de la página

    $("#success-alert").hide();

    Una vez que la alerta necesaria para mostrarse

     $("#success-alert").show();
     window.setTimeout(function () {
         $("#success-alert").slideUp(500, function () {
              $("#success-alert").hide();
          });
     }, 5000);

    Nota que fadeTo establece la opacidad a 0, por lo que la pantalla era ninguno y la opacidad fue de 0, que es la razón por la que me quita de mi solución.

  7. 0

    Después de ir a través de algunas de las respuestas aquí en otro hilo, he aquí lo que terminó con:

    He creado una función llamada showAlert() que agregar dinámicamente una alerta, con un opcional type y closeDealy. Así que usted puede, por ejemplo, agregar una alerta de tipo danger (es decir, Bootstrap de alerta de peligro) que se cerrará automáticamente después de 5 segundos, así:

    showAlert("Warning message", "danger", 5000);

    Para ello, agregue la siguiente función Javascript:

    function showAlert(message, type, closeDelay) {
    
        if ($("#alerts-container").length == 0) {
            //alerts-container does not exist, add it
            $("body")
                .append( $('<div id="alerts-container" style="position: fixed;
                    width: 50%; left: 25%; top: 10%;">') );
        }
    
        //default to alert-info; other options include success, warning, danger
        type = type || "info";    
    
        //create the alert div
        var alert = $('<div class="alert alert-' + type + ' fade in">')
            .append(
                $('<button type="button" class="close" data-dismiss="alert">')
                .append("&times;")
            )
            .append(message);
    
        //add the alert div to top of alerts-container, use append() to add to bottom
        $("#alerts-container").prepend(alert);
    
        //if closeDelay was passed - set a timeout to close the alert
        if (closeDelay)
            window.setTimeout(function() { alert.alert("close") }, closeDelay);     
    }
  8. 0

    Necesitaba una solución muy simple para ocultar algo después de algún tiempo, y se las arregló para conseguir que esto funcione:

    Angular usted puede hacer esto:

    $timeout(self.hideError,2000);

    Esta es la función que me llame cuando el tiempo de espera se ha alcanzado

     self.hideError = function(){
       self.HasError = false;
       self.ErrorMessage = '';
    };

    Así que ahora mi cuadro de diálogo o la interfaz de usuario puede utilizar dichas propiedades para ocultar elementos.

  9. 0

    Con retraso y fade :

    setTimeout(function(){
        $(".alert").each(function(index){
            $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
                $(this).remove();
            });
        });
    },2000);
  10. 0

    probar este

    $(function () {
    
     setTimeout(function () {
                if ($(".alert").is(":visible")){
                     //you may add animate.css class for fancy fadeout
                    $(".alert").fadeOut("fast");
                }
    
            }, 3000)
    
    });

Dejar respuesta

Please enter your comment!
Please enter your name here