Início
Loja
Olá, hoje irei ensinar a fazer uma caixa de aviso similar a que uso no [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]. O Js não foi feito por mim, apenas o css.
Primeiramente adicione em sua index/header:
Agora adicione em seu Css:
Por fim, adicione a imagem abaixo na pasta imagens:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Créditos: Je4n & Loko-Poko
Primeiramente adicione em sua index/header:
- Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#erro:even").addClass("alt");
$("#erro .delete").click(function(){
$(this).parents("#erro").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
//]]>
</script>
Agora adicione em seu Css:
- Código:
/* Alerta by Wasd */
#erro {
background-color: #1BD113;
padding: 10px;
width: 540px;
position: fixed;
z-index: 100;
border: 1px solid #1E970D;
border-bottom: none;
border-top: 2px solid #1E970D;
margin-top: -18px;
border-radius: 4px 4px 0 0;
color: #FFF;
text-align: center;
right: 4pt;
bottom: 0pt;
font-weight: bold;
}
#erro #text {
font-size: 13px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
#erro .delete {
background: url(../imagens/fechar.png) no-repeat;
float: right;
width: 10px;
height: 10px;
margin-right: 0;
margin-top: 3px;
cursor: pointer;
}
Por fim, adicione a imagem abaixo na pasta imagens:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Créditos: Je4n & Loko-Poko
