Can Bootstrap Notifications Twitter Like and How?

Question

When I first saw the warnings in Bootstrap, I thought that they would behave the way a modal window does, dropping or fading, and then disappearing when closed. But it looks like they are always visible. I think I could make them sit in the layer above my application and control the display, but I was wondering if the functionality was implemented?

thank!

Change what I still have:

<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> 

Answer 1

I strongly disagree with most of the answers mentioned earlier.

Short answer:

Omit the "in" class and add it using jQuery to quench it.

See this jsfiddle for an example that disappears in alert state after 3 seconds http://jsfiddle.net/QAz2U/3/

Long answer:

Although it is true that bootstrap does not support fading in warnings, most of the answers here use the fade jQuery function, which uses JavaScript to animate (erase) an element. The big advantage of this is cross-browser compatibility. The downside is performance (see Also: jQuery to invoke CSS3 fade animation? ).

Bootstrap uses CSS3 transitions that have better performance. What is important for mobile devices:

Download CSS to display a warning:

 .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; } 

Why do I think this performance is so important? People using older browsers and hardware will potentially get jerky transitions with jQuery.fade (). The same goes for older hardware with modern browsers. Using CSS3 transitions, people using modern browsers will get smooth animation even with old equipment, and people using old browsers that do not support CSS transitions will just instantly notice that an element has entered it, which, in my opinion, is more convenient for the user than volatile animation.

I came here to find the same answer as above: to disappear in the bootstragg. After some digging in the code and CSS Bootstrap, the answer is pretty simple. Do not add the in class to your alert. And add this using jQuery when you want to disappear in your warning.

HTML (note that there is no NO in the class!)

 <div id="myAlert" class="alert success fade" data-alert="alert"> <!-- rest of alert code goes here --> </div> 

JavaScript:

 function showAlert(){ $("#myAlert").addClass("in") } 

The function call above the function adds the "in" class and disappears in the notification using CSS3 transitions :-)

Also see this jsfiddle for an example using a timeout (thanks John Lehmann!): Http://jsfiddle.net/QAz2U/3/

Answer 2

I am using the following:

In your template a warning area

 <div id="alert-area"></div> 

Then jQuery function to display warning

 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!'); 

Answer 3

You can fade out in a box using jquery. Use the bootstraps built into the 'hide' class to effectively set the display: none in the div element:

 <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> 

and then use the fadeIn function in jquery, for example:

 $("#saveAlert").fadeIn(); 

The duration of the fadeIn function is also indicated, for example: $ ("# SaveAlert") FadeIn (400) ;.

Full information on using the fadeIn function can be found on the official jQuery documentation website: http://api.jquery.com/fadeIn/

Just a side selection, if you are not using jquery, you can add the 'hide' class to your own CSS file or just add it to your div:

  <div style="display:none;" id="saveAlert"> 

In this case, your div will basically be set as hidden, and then jQuery will perform the fadeIn action, causing the div to display.

Answer 4

For version 2.3 and above, simply add:

$(".alert").fadeOut(3000 );

self-loading:

 <div class="alert success fade in" data-alert="alert" > <a class="close" data-dismiss="alert" href="#">&times;</a> // code </div> 

It works in all browsers.

Answer 5

Add a hide class to alert-message . Then enter the following code after importing the jQuery script:

 $(document).ready( function(){ $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'}); window.setTimeout( function(){ $(".alert-message").slideUp(); }, 2500); }); 

If you want to process several messages, this code will hide them in ascending order:

 $(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); }); }); 

Answer 6

None of the current answers worked for me. I am using Bootstrap 3.

I liked what Rob Vermer did and started with his answer.

For the fade effect and the subsequent effect, I simply used the following function and used jQuery:

Html on my page to add alerts to:

  <div class="alert-messages text-center"> </div> 

Javascript function to display and reject a warning.

 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(); }); } 

Then, to show and reject the warning, simply call the function as follows:

  showAndDismissAlert('success', 'Saved Successfully!'); showAndDismissAlert('danger', 'Error Encountered'); showAndDismissAlert('info', 'Message Received'); 

As a note, I entered the text div.alert, fixed at the top:

  <style> div.alert-messages { position: fixed; top: 50px; left: 25%; right: 25%; z-index: 7000; } </style> 

Answer 7

I disagree with how Bootstrap uses fade in (as seen from their documentation - http://v4-alpha.getbootstrap.com/components/alerts/ ), and my recommendation is to avoid class names fade and in and avoid this pattern in overall (which is currently being considered in the highest ranking answer to this question).

(1) The semantics are incorrect - transitions are temporary, but class names live. So why should we call our classes fade and fade in ? It should be faded and faded-in , so when developers read the markup, it’s clear that these elements were faded or faded-in . The Bootstrap team has already done away with hide for hidden , why is fade any other?

(2) Using 2 classes fade and in for one transition pollutes class space. And it is not clear that fade and in are related to each other. The in class looks like a completely independent class, such as alert and alert-success .

The best solution is to use faded when the element disappears and replace this class with faded-in when the element has been obscured.

Alert faded

So, to answer the question. I think the markup, style, and logic of the warnings should be written as follows. Note. Feel free to replace jQuery logic if you are using javascript for vanilla.

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'); }); 

Answer 8

Of course yes. Use this simple file in your project: https://gist.github.com/3851727

First add the HTML as follows:

 <div id="messagebox" class="alert hide"></div> 

and then use:

 $("#messagebox").message({text: "Hello world!", type: "error"}); 

As parameters, you can pass all types of bootstrap warnings, such as error , success and warning to type .

Answer 9

I got this way to close the disappearance of my alert after 3 seconds. Hope this will be helpful.

  setTimeout(function(){ $('.alert').fadeTo("slow", 0.1, function(){ $('.alert').alert('close') }); }, 3000)