<div id="alert">
<div id="close-alert">X</div>
<span>
<i class='fa fa-2x' id="alert-icon"></i>
</span>
<span id="alert-message"></span>
</div>
Veja como é fácil, com algumas poucas linhas de código, criar um alerta que não atrapalha o usuário, e pode ser atualizado de várias formas. Neste exemplo, estou usando um arquivo javascript que contém os alertas (veja abaixo).
Para este demo, foram usados os seguintes recursos:
<div id="alert">
<div id="close-alert">X</div>
<span>
<i class='fa fa-2x' id="alert-icon"></i>
</span>
<span id="alert-message"></span>
</div>
#alert {
z-index: 999;
position: fixed;
left;
0;
width: 100%;
height: 60px;
text-align: center;
padding: 12px 0 30px 0;
background-color: #000;
opacity: 0.6;
color: #fff;
text-shadow: 0 0 2px #ccc;
bottom: 0px;
/*Mude aqui para definir se o
alerta vai ser encima ou no rodape;
use bottom para rodapé e top para cabeçalho*/
}
#alert #close-alert {
border: 1px solid #000;
position: absolute;
right: 0px;
top: 0;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
transition: all 0.2s ease;
cursor: pointer;
}
#alert #close-alert:hover {
background-color: #980000;
border: 1px solid #fff;
}
#alert span {
max-width: 80%;
}
#alert-icon{
padding-right: 15px
}
#alert #alert-message a, #alert #alert-message a:visited{
color:#c2c2c2;
font-weight: 800;
text-decoration: none;
transition: all 0.2s ease-in;
}
#alert #alert-message a:hover{
color:#fff;
text-shadow:0 0 3px #ccc;
}
$(function () {
Rollnews(); //inicia a rolagem de alertas
$("#close-alert").click(function(){
$("#alert").fadeOut(); //fecha o alerta
});
});
//Rolagem de alertas
function Rollnews(){
var i=0;
$("#alert-icon").addClass(news[i].icon);
$("#alert-message").html(news[i].text);
$("#alert-icon,#alert-message").fadeIn();
setInterval(function(){
var previous = i;
i++;
if(i>news.length-1){
i = 0;
}
$("#alert-icon").removeClass(news[previous].icon).addClass(news[i].icon);
$("#alert-message").html(news[i].text);
},3*1000);
}
var news = [
{
text : "Este é o primeiro alerta com um <a href='http://www.zueuz.com.br' target='_blank'>Link</a>",
icon : "fa-info-circle"
},
{
text : "Este é o segundo alerta, com outra mensagem qualquer",
icon : "fa-exclamation-circle"
},
{
text : "Ainda mais um alerta, que pode ser uma mensagem, uma imagem, ou um tweet (tweets necessitam de outro plugin)",
icon : "fa-bell-o"
}];