9

Como puedo hacer para crear un Alert en JavaScript que se vea por 2 segundos y luego cierre automaticamente (solo) sin que el usuario haga click en aceptar?

1
  • Considera marcar alguna de las excelentes respuestas que te han dado como aceptada.
    – devconcept
    Commented el 29 ago. 2016 a las 16:22

7 respuestas 7

7

Te presento a Toastr, es una librería en JavaScript que genera notificaciones de una manera "moderna":

toastr.options = {
  "debug": false,
  "positionClass": "toast-bottom-right",
  "onclick": null,
  "fadeIn": 300,
  "fadeOut": 100,
  "timeOut": 5000,
  "extendedTimeOut": 1000
}

var showToastrs = false;

function toastrs() {
  if (!showToastrs) {
    toastr.error('Estamos bajo ataque DDoS', 'Error Critico!');
    toastr.success('Se guardaron los cambios satisfactoriamente', 'Todo en orden');
    toastr.warning('La latencia del server esta aumentando.', 'Alerta!');
  } else {
    toastr.error('no se puede!\'t.', 'Otro error crítico');
  }
}

// Definimos los callback cuando el TOAST le da un fade in/out:
toastr.options.onFadeIn = function() {
  showToastrs = true;
};
toastr.options.onFadeOut = function() {
  showToastrs = false;
};

$(function() {
  $("#clear").on("click", function() {
    // Clears the current list of toasts
    toastr.clear();
  });
  $("#rewind").on("click", function() {
    // show toastrs :)
    toastrs();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<link href="http://codeseven.github.com/toastr/toastr.css" rel="stylesheet"/>
<link href="http://codeseven.github.com/toastr/toastr-responsive.css" rel="stylesheet"/>
<a href="http://codeseven.github.io/toastr/demo.html" target="_blank">Toastr official demo</a>
<br/>
<br/>
<input id="clear" type="submit" value="Limpiar notificaciones">
<input id="rewind" type="submit" value="Mostrar notificaciones">

2
  • 1
    Esto es cool, no conocía Toastr, mucho gusto! =), creo que esto lo usare en algunos proyectos! gracias por la información.
    – Jorgesys
    Commented el 23 ago. 2016 a las 22:56
  • 1
    de nada @Elenasys, estamos para servir :D
    – fredyfx
    Commented el 23 ago. 2016 a las 23:29
4

Yo lo hago con la funcion setTimeout. De la siguiente forma.

$('#alert').fadeIn();     
  setTimeout(function() {
       $("#alert").fadeOut();           
  },2000);

1
  • Hola ¿Cómo se haría ese mismo código pero en javascript puro? Commented el 24 dic. 2022 a las 15:17
4

Veo que quieres abrir y cerrar el mensaje, con Javascript esto no se puede realizar, el cerrar el mensaje tiene que ser manualmente.

Como otra opción es mostrar una ventana con el mensaje y cerrarla automáticamente después de 2 segundos (2000 ms).

<html>
<body>

<p>Abre un mensaje que se cerrara en 2 segundos.</p>

<button onclick="ejecutaAlerta()">muestra mensaje</button>

<script>
function ejecutaAlerta() {   
var w = window.open('','','width=100,height=100')
w.document.write('Hola StackOverflow!')
w.focus()
setTimeout(function() {w.close();}, 2000)
}
</script>

</body>
</html>

Quien realiza el llamado de la funcion es el método setTimeOut():

setTimeout() Ejecuta una funcion, despues de esperar durante un numero especifico de milisegundos.

2
  • el OP quiere otra cosa, quiere que el mensaje permanezca dos segundos visible, y no en cambio que tarde dos segundos en aparecer. Commented el 24 ago. 2016 a las 1:51
  • Gracias, he eliminado la segunda opción que no cumplia con lo que requiere el OP.
    – Jorgesys
    Commented el 24 ago. 2016 a las 2:37
3

Otra opción que te puede servir es JQuery jGrowl

Te dejo un ejemplo con una duración de 2 segundos:

$.jGrowl("Hello world!",{ life : 2000});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>

si requieres algo más "moderno" te recomiendo toastr

3

Me gusta la solución de @fredyfx pero si te importa la velocidad de carga y los recursos utilizados por tu app puedes implementar algo similar en menos bytes poniendo solo las funciones que vas a usar.

Este es un ejemplo, claro que los estilos los puedes ajustar a la estética de tu aplicación y puedes agregar mas features. Esta es una base para escribir tu propio componente sin tener que cargar largas librerías que resultan en aplicaciones pesadas.

(function(window, document) { // asilamos el componente
  // creamos el contedor de las tostadas o la tostadora
  var container = document.createElement('div');
  container.className = 'toast-container';
  document.body.appendChild(container);
  
  // esta es la funcion que hace la tostada
  window.doToast = function(message) {
    // creamos tostada
    var toast = document.createElement('div');
    toast.className = 'toast-toast';
    toast.innerHTML = message;

    // agregamos a la tostadora
    container.appendChild(toast);    

    // programamos su eliminación
    setTimeout(function() {
      // cuando acabe de desaparecer, lo eliminamos del dom.
      toast.addEventListener("transitionend", function() {
         container.removeChild(toast);
      }, false);

      // agregamos un estilo que inicie la "transition". 
      toast.classList.add("fadeout");      
    }, 2000); // OP dijo, "solo dos segundos"
  }
})(window, document);

// ejempo de uso
doToast("Hola mundo!");

// ejemplo retardado de uso
setTimeout(function() {
   doToast("Soy una tostada");
}, 1200);
.toast-container {
  position: fixed;
  width: 150px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10; /* sobre todo lo demás */
}

.toast-toast {
  font-size: 250%;
  margin-bottom: 3px;
  border-radius: 2px;
  border: 1px green;
  background: #98FF98;
  text-align: center;
  line-height: 1;  
  transition: all 0.5s; 
}

.fadeout{
  opacity: 0;
}

1
  • como dirían en tu tierra: sos un capo :D
    – fredyfx
    Commented el 24 ago. 2016 a las 3:54
2

Con el alert estandar de javascript dudo que puedas realizarlo, pero si usas un alert implementado desde jquery como ser

jqAlert

veras en el ejemplo que implementar un timer, por ejemplo el del titulo Alert Dialogs define

$.alert('jqAlert is easy to use with alerts and its where I got my start.', {
    title:'Alert Title Message',
    icon:'',
    customIcon:'icon-asterisk',
    exception: 'Exception',
    stack: 'Stack Trace',
    timer:5000,
    onTimeout:function() { },
    onClose: function() { },
    buttons:[
        {
            title:'Press Me',
            callback:function() { $(this).dialog("close");}
        }
    ]
});

veras el timer:5000 despues de ese tiempo se cierra solo

0

Yo realice esto para el evento de un submit:

document.addEventListener("DOMContentLoaded", function() {


    const clicked = localStorage.getItem('btn-clicked');

    checkImgBtnClicked();

    function checkImgBtnClicked() {

        if (clicked) {
            document.getElementById('btn').disabled = true;

            saveClicked();

            setTimeout(() => {

                // Crear una alerta
                const alertaExito = document.createElement('P');
                alertaExito.classList.add('auth__warning', 'mt-3');
                alertaExito.textContent = 'Debes de esperar para volver a envíar otro correo.';

                formulario.appendChild(alertaExito);

                setTimeout(() => {
                    alertaExito.remove();
                }, 400000);
            }, 50);

            removeAlert();

        } else {
            document.getElementById('btn').addEventListener('click', saveClicked);
        }


    }

    function saveClicked() {
        localStorage.setItem('btn-clicked', 'true');
        setTimeout(function() {
            localStorage.clear();
        }, 300000);
        setTimeout(function() {
            location.reload(true);
        }, 300000);
    }

    

    function removeAlert() {
       
        setTimeout(function() {
            
            document.getElementById('alert').remove();
        }, 8000);
    }


});

Este es el submit es el envío de correo de verificación en Laravel

<form id="formulario" class="text-center" method="POST" action="{{ route('verification.resend') }}">
@csrf

<button id="btn" type="submit" class="btn btn-primary text-center mb-3">Da click aquí para enviarte otro correo</button>

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.