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?
7 respuestas
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">
-
1Esto 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
Yo lo hago con la funcion setTimeout. De la siguiente forma.
$('#alert').fadeIn();
setTimeout(function() {
$("#alert").fadeOut();
},2000);
-
Hola ¿Cómo se haría ese mismo código pero en javascript puro? Commented el 24 dic. 2022 a las 15:17
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.
-
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
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
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;
}
Con el alert estandar de javascript dudo que puedas realizarlo, pero si usas un alert implementado desde jquery como ser
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
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>