jquery - generar - notificaciones de twitter en chrome
¿Pueden las alertas de Twitter Bootstrap desvanecerse tanto como desaparecer? (10)
Agregue la clase hide al alert-message . A continuación, coloque el siguiente código después de la importación de su script jQuery:
$(document).ready( function(){
$(".alert-message").animate({ ''height'':''toggle'',''opacity'':''toggle''});
window.setTimeout( function(){
$(".alert-message").slideUp();
}, 2500);
});
Si desea manejar múltiples mensajes, este código los ocultará en orden ascendente:
$(document).ready( function(){
var hide_delay = 2500; // starting timeout before first message is hidden
var hide_next = 800; // time in mS to wait before hiding next message
$(".alert-message").slideDown().each( function(index,el) {
window.setTimeout( function(){
$(el).slideUp(); // hide the message
}, hide_delay + hide_next*index);
});
});
Cuando vi por primera vez las alertas en Bootstrap, pensé que se comportarían como lo hace la ventana modal, cayendo o desapareciendo, y luego desapareciendo cuando se cierra. Pero parece que siempre son visibles. Supongo que puedo hacer que se sienten en una capa encima de mi aplicación y administrarlas, pero me pregunto si la funcionalidad está integrada.
¡Gracias!
Editar, lo que tengo hasta ahora:
<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
<a class="close" href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
Conseguí cerrar de esta manera mi Alerta después de 3 segundos. Espero que sea útil.
setTimeout(function(){
$(''.alert'').fadeTo("slow", 0.1, function(){
$(''.alert'').alert(''close'')
});
}, 3000)
Esta es una pregunta muy importante y estaba luchando para lograr que se hiciera (mostrar / ocultar) el mensaje al reemplazar el actual y agregar un nuevo mensaje.
A continuación se muestra un ejemplo de trabajo:
function showAndDismissAlert(type, message) {
var htmlAlert = ''<div class="alert alert-'' + type + ''">'' + message + ''</div>'';
$(".alert-messages").prepend(htmlAlert);
$(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
$(this).remove();
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-messages"></div>
<div class="buttons">
<button type="button" name="button" onclick="showAndDismissAlert(''success'', ''Saved Successfully!'')">Button1</button>
<button type="button" name="button" onclick="showAndDismissAlert(''danger'', ''Error Encountered'')">Button2</button>
<button type="button" name="button" onclick="showAndDismissAlert(''info'', ''Message Received'')">Button3</button>
</div>
Espero que ayude a otros!
Estoy totalmente en desacuerdo con la mayoría de las respuestas mencionadas anteriormente.
Respuesta corta:
Omita la clase "in" y agréguela usando jQuery para fundirla.
Vea este jsfiddle para un ejemplo que se desvanece en alerta después de 3 segundos http://jsfiddle.net/QAz2U/3/
Respuesta larga:
Aunque es cierto, bootstrap no es compatible de forma nativa con el desvanecimiento de las alertas, la mayoría de las respuestas aquí usan la función jQuery fade, que usa JavaScript para animar (fundir) el elemento. La gran ventaja de esto es la compatibilidad de navegador cruzado. La desventaja es el rendimiento (consulte también: jQuery para llamar a la animación de desvanecimiento de CSS3 ).
Bootstrap usa transiciones CSS3, que tienen mucho mejor rendimiento. Lo que es importante para dispositivos móviles:
Bootstraps CSS para atenuar la alerta:
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
¿Por qué creo que este rendimiento es tan importante? Las personas que usan navegadores y hardware antiguos obtendrán transiciones entrecortadas con jQuery.fade (). Lo mismo ocurre con el hardware antiguo con navegadores modernos. Con las transiciones CSS3, las personas que usan navegadores modernos obtendrán una animación uniforme incluso con hardware antiguo, y las personas que utilicen navegadores antiguos que no admitan transiciones CSS verán instantáneamente el elemento emergente, que creo que es una mejor experiencia de usuario que las animaciones entrecortadas.
Vine aquí buscando la misma respuesta que la anterior: desvanecerme en una alerta de arranque. Después de investigar el código y CSS de Bootstrap, la respuesta es bastante simple. No agregue la clase "in" a su alerta. Y agregue esto usando jQuery cuando quiera desvanecerse en su alerta.
HTML (¡fíjate que NO hay en clase!)
<div id="myAlert" class="alert success fade" data-alert="alert">
<!-- rest of alert code goes here -->
</div>
Javascript:
function showAlert(){
$("#myAlert").addClass("in")
}
Llamar a la función anterior agrega la clase "in" y se desvanece en la alerta mediante transiciones CSS3 :-)
También vea este jsfiddle como ejemplo usando un tiempo de espera (¡gracias John Lehmann!): http://jsfiddle.net/QAz2U/3/
Lo que uso es esto:
En su plantilla, un área de alerta
<div id="alert-area"></div>
Luego, una función jQuery para mostrar una alerta
function newAlert (type, message) {
$("#alert-area").append($("<div class=''alert-message " + type + " fade in'' data-alert><p> " + message + " </p></div>"));
$(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert(''success'', ''Oh yeah!'');
Ninguna de las respuestas actuales funcionó para mí. Estoy usando Bootstrap 3.
Me gustó lo que Rob Vermeer estaba haciendo y comencé con su respuesta.
Para un efecto de fundido de entrada y luego de fundido de salida, acabo de utilizar la siguiente función y utilicé jQuery:
Html en mi página para agregar la (s) alerta (s) a:
<div class="alert-messages text-center">
</div>
Función Javascript para mostrar y descartar la alerta.
function showAndDismissAlert(type, message) {
var htmlAlert = ''<div class="alert alert-'' + type + ''">'' + message + ''</div>'';
// Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
$(".alert-messages").prepend(htmlAlert);
// Since we are prepending, take the first alert and tell it to fade in and then fade out.
// Note: if we were appending, then should use last() instead of first()
$(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}
Luego, para mostrar y descartar la alerta, simplemente llame a la función de esta manera:
showAndDismissAlert(''success'', ''Saved Successfully!'');
showAndDismissAlert(''danger'', ''Error Encountered'');
showAndDismissAlert(''info'', ''Message Received'');
Como nota al margen, diseñé los mensajes div.alert corregidos en la parte superior:
<style>
div.alert-messages {
position: fixed;
top: 50px;
left: 25%;
right: 25%;
z-index: 7000;
}
</style>
No estoy de acuerdo con la forma en que Bootstrap usa el fade in (como se ve en su documentación - http://v4-alpha.getbootstrap.com/components/alerts/ ), y mi sugerencia es evitar que los nombres de clase se fade y , y para evitar ese patrón en general (que actualmente se ve en la respuesta mejor calificada a esta pregunta).
(1) La semántica es incorrecta: las transiciones son temporales, pero los nombres de las clases siguen vigentes. Entonces, ¿por qué deberíamos nombrar nuestras clases fade y fade in ? Debe faded y faded-in , de modo que cuando los desarrolladores lean el marcado, quede claro que esos elementos se faded o se faded-in . El equipo de Bootstrap ya ha eliminado el hide por hidden , ¿por qué se fade algo diferente?
(2) Usar 2 clases de fade y entrada para una sola transición contamina el espacio de clase. Y no está claro si el fade y el fade están asociados entre sí. La clase parece una clase completamente independiente, como alert y alert-success .
La mejor solución es utilizar faded cuando el elemento se ha desvanecido, y reemplazar esa clase con faded-in cuando el elemento se ha desvanecido.
Alerta desvanecida
Entonces para responder la pregunta. Creo que el marcado de alerta, el estilo y la lógica deben escribirse de la siguiente manera. Nota: Siéntase libre de reemplazar la lógica de jQuery, si está usando vainilla javascript .
HTML
<div id="saveAlert" class="alert alert-success">
<a class="close" href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
CSS
.faded {
opacity: 0;
transition: opacity 1s;
}
JQuery
$(''#saveAlert .close'').on(''click'', function () {
$("#saveAlert")
.addClass(''faded'');
});
Para 2.3 y superior, solo agrega:
$(".alert").fadeOut(3000 );
oreja:
<div class="alert success fade in" data-alert="alert" >
<a class="close" data-dismiss="alert" href="#">×</a>
// code
</div>
Funciona en todos los navegadores.
Por supuesto que sí. Use este simple archivo en su proyecto: https://gist.github.com/3851727
Primero agrega tu HTML así:
<div id="messagebox" class="alert hide"></div>
y luego usa:
$("#messagebox").message({text: "Hello world!", type: "error"});
Puede pasar todos los tipos de alerta de arranque como error , success y warning para type propiedad como opciones.
Puede desvanecerse en una caja usando jquery. Utilice bootstraps incorporados en la clase ''hide'' para establecer efectivamente la pantalla: none en el elemento div:
<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
<a class="close" href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
y luego usa la función fadeIn en jquery, así:
$("#saveAlert").fadeIn();
También se especifica una duración para la función fadeIn, por ejemplo: $ ("# saveAlert"). FadeIn (400);
Los detalles completos sobre el uso de la función fadeIn se pueden encontrar en el sitio oficial de documentación de jQuery: http://api.jquery.com/fadeIn/
Solo una nota al margen, si no estás usando jquery, puedes agregar la clase ''ocultar'' a tu propio archivo CSS, o simplemente agregar esto a tu div:
<div style="display:none;" id="saveAlert">
Su div se establecerá básicamente como oculto por defecto, y luego jQuery realizará la acción de fundido de entrada, forzando que se muestre div.